I'm trying to center a modal. It contains other components, so the position depends on the content. I'm trying to get it this way, which doesn't work and not sure how to fix it:
component 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>
component 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)
}
The console log shows the size as 0. If I check it later once it's displayed, it shows the right size. When and how can I get this size (of the #modal) before/or just after it's all displayed?
constructor(private cdRef:ChangeDetectorRef){}
@ViewChild('modal') private modalContent: ElementRef;
ngAfterViewInit() {
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)
}