resize

Import

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.

Usage

injectResize

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

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

NgxResize

html

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

ts

@Component({
  imports: [NgxResize],
  templateUrl: './app.html',
})
export class App {
  onResize(event: ResizeResult) {
    // runs outside of Angular Zone by default
  }
}

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

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

ResizeOptions

We can pass in specific ResizeOptions to each approach:

injectResize(someOptions);

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

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
@NgModule({
  providers: [provideResizeOptions(globalOptions)],
})
export class AppModule {}

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