CODEWITHSUNDEEP
angular
Piater
Piater

Reputation: 63

How to get size of a child component in angular 2?

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?

Upvotes: 6

Views: 7924

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657168

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)   
}

Upvotes: 5

Related Questions