Skip to content


Created by Tomer


import { NgxResize, injectResize } from 'ngxtension/resize';

resize entry point exposes 2 symbols:

  • injectResize(): a CIF that observes the resize event on the Host element of the component
  • NgxResize: a directive that can observe the resize event of any element that it is attached on

Both emit resize result outside of Angular Zone by default but both provide way to configure the behavior.



injectResize returns an Observable<ResizeResult> (see ResizeResult TBD)

export class App {
resize$ = injectResize(); // Observable<ResizeResult>


<div (ngxResize)="onResize($event)">
<!-- content -->

If you are not a fan of inject(), you can also use NgxResize on the Host element by leveraging hostDirectives

hostDirectives: [{ directive: NgxResize, outputs: ['ngxResize'] }],
export class App {
@HostListener('ngxResize', ['$event'])
onResize(event: ResizeResult) {
// listen for resize event from NgxResize


We can pass in specific ResizeOptions to each approach:

<div (ngxResize)="onResize($event)" [ngxResizeOptions]="someOptions">

To provide ResizeOptions globally to the application or to a sub component tree (via Route#providers), we can use provideResizeOptions()

// Standalone
bootstrapApplication(App, { providers: [provideResizeOptions(globalOptions)] });
// AppModule
providers: [provideResizeOptions(globalOptions)],
export class AppModule {}
// Route#provider (equivalent to Lazy-load modules)
const route = {
path: 'some-path',
providers: [provideResizeOptions(subTreeGlobalOptions)],