¿Cuál es la mejor manera de realizar alguna acción cuando el div en la plantilla cambia de tamaño? El tamaño del div cambia cuando se cambia el tamaño de la ventana. ¿Con Rxjs Observable/suscríbete o de alguna otra manera?
Modelo:
<div #eMainFrame class="main-frame"> ... </div>Componente:
@Component({ selector: 'app-box', templateUrl: './box.component.html', styleUrls: ['./box.component.css'] }) export class BoxComponent implements OnInit { @ViewChild('eMainFrame') eMainFrame : ElementRef; constructor(){} ngOnInit(){ // This shows the elements current size console.log(this.eMainFrame.nativeElement.offsetWidth); } }Componente actualizado (este ejemplo detecta cuando se cambia el tamaño de la ventana)
constructor(ngZone: NgZone) { window.onresize = (e) => { ngZone.run(() => { clearTimeout(this.timerWindowResize); this.timerWindowResize = setTimeout(this._calculateDivSize, 100); }); } } _calculateDivSize(){ console.log(this.eMainFrame.nativeElement.offsetWidth); }pero esto me da un error:
EXCEPCIÓN: no se puede leer la propiedad 'nativeElement' de undefined
El navegador no proporciona nada, por lo tanto, debe sondear el valor
Se ngDoCheck() cuando Angular ejecuta la detección de cambios. Creo que este es un buen lugar para hacer la verificación:
ngDoCheck() { console.log(this.eMainFrame.nativeElement.offsetWidth); }Si solo necesita verificar una vez después de la creación del componente, use
ngAfterContentInit(){ // This shows the elements current size console.log(this.eMainFrame.nativeElement.offsetWidth); }