FFResizeSensor is based on ResizeSensor
from CSS Element Queries and just adjusts it for an angular project.
npm install ff-resize-sensor --save
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {FFResizeSensorModule} from 'ff-resize-sensor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FFResizeSensorModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
From view template as (resize)
output
app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'ff-root',
template: `<div class="myCss" ffResizeSensor (resize)="onResize($event)"></div>`
})
export class AppComponent {
onResize(e) {
console.log('Event from view template', e);
}
}
From service with subscribe
method
app.component.ts
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {FFResizeSensorService} from 'ff-resize-sensor';
@Component({
selector: 'ff-root',
template: `<div class="myCss" #domElem></div>`
})
export class AppComponent implements AfterViewInit {
@ViewChild('domElem') domElem: ElementRef;
constructor(private service: FFResizeSensorService) {}
ngAfterViewInit(): void {
// Method gets some HTMLElemnt and callback
// Callback will be called after HTMLElement resized
this.service.subscribe(this.domElem.nativeElement, (event) => {
console.log('Event from service', event);
});
}
}
FFResizeSensorService
subscribe(HTMLElement, (FFResizeSensorEvent)=>void): void
FFResizeSensorDirective
public width: number;
public height: number;
public oldWidth: number;
public oldHeight: number;
@Output() readonly resize:EventEmitter<FFResizeSensorEvent>