Estoy tratando de centrar un modal. Contiene otros componentes, por lo que la posición depende del contenido. Estoy tratando de obtenerlo de esta manera, que no funciona y no estoy seguro de cómo solucionarlo:

componente HTML:

 <div #modal [style.top]="positionTop" [style.left]="positionLeft"> <app-modal-one *ngIf="feature==='one'"> </app-modal-one> <app-modal-two *ngIf="feature==='two'"></app-modal-two> <app-modal-three *ngIf="feature==='three'"></app-modal-three> </div>

componente ts:

 @ViewChild('modal') private modalContent: ElementRef; ngOnInit() { this.modalHeight = this.modalContent.nativeElement.offsetHeight; this.modalWidth = this.modalContent.nativeElement.offsetWidth; this.positionLeft = (window.innerWidth - this.modalWidth) / 2 + "px"; this.positionTop = (window.innerHeight - this.modalHeight) / 2 + "px"; console.log("on init: "+this.modalWidth) }

El registro de la consola muestra el tamaño como 0. Si lo reviso más tarde una vez que se muestra, muestra el tamaño correcto. ¿Cuándo y cómo puedo obtener este tamaño (del #modal) antes o justo después de que se muestre todo?