Associare alla dimensione dell'elemento (div)

Question

Ho un componente con proprietà Larghezza e Altezza. Come posso legare l'altezza e la larghezza della vista del componente a queste proprietà?

Ho bisogno che vengano aggiornati ogni volta che cambia anche la dimensione del componente, ad esempio ridimensionando la finestra del browser.

Answer 1

Utilizzare (window:resize)="onResize($event)" per ascoltare eventi globali. È possibile utilizzare window, document o body come target. Vedi this plunk

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div 
     class="square" 
     [style.width.px]="width" 
     [style.height.px]="height" 
     (window:resize)="onResize($event)" 
    ></div> 
    ` 
}) 
export class App { 
    width = 100; 
    height = 100; 

    onResize(event) { 
    this.width += 100; 
    this.height += 100; 
    } 
}