Angular resize util
Angular 14 service and directive for detecting changes on an element size. Internally it use the Resize observer.
You can use it as directive, inside your angular template
<div (fpResized)="onResized($event)"></div>
or as a service, if you use a third party library and need to observe to an id of the htmlElement
this.resiseService.registerObserver('my-id', {id: 'htmlId', onResize: (event) => console.log(event)})
Working example
https://stackblitz.com/edit/fp-toolsangular-resize
HowTo use the library
To install
npm i @fp-tools/angular-resize
or yarn add @fp-tools/angular-resize
Use the directive
First add ResizeModule
to your modules import
import { ResizeModule } from '@fp-tools/angular-resize';
@NgModule({
imports: [..., ResizeModule],
declarations: [...],
bootstrap: [...],
})
export class MyModule {}
Then use the directive on the element where you want to listen. The ResizeObservable will automatically unsubscribe whenever the directive is destroyed.
<div (fpResize)="onResize()">I'm a div with the resize directive</div>
@Component({...})
export class MyComponent {
onResize() {
console.log('resize');
}
}
Use the service
In some cases a non-angular library may have an issue with resizing. F.E. if you resize your window a map should be resized as wel, for some reason this is not the case and you should manual trigger the map.resize()
. In this case it can be easily done with the ResizeService
Don't forget to destroy the resize listener when you don't need it anymore. This may avoid memory-leaks
import { Injectable } from '@angular/core';
import { ResizeService } from '@fp-tools/angular-resize';
@Injectable({ providedIn: 'root' })
export class MyService {
constructor(private readonly resizeService: ResizeService) {}
init() {
this.resizeService.registerObserver('myId', {
id: 'myId',
onResize: () => console.log('resize by the service'),
});
}
destroy() {
this.resizeService.destroy('myId');
}
}
License
MIT © Bo Vandersteene