Angular 4 event after element displayed with *ngIf

Question

I have a demo Here

I have a div in a component that is shown with an *ngIf

I need to know the height of this element.

I can't seem to do this before it is displayed or in the function that shows the element.

Is there an event that occurs that I can use to get the height

import { Component, Input, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'child-comp', templateUrl: './child.component.html' }) export class ChildComponent implements OnInit, AfterViewInit { @Input() parent: ElementRef; private block: ElementRef; @ViewChild('block') set content(content: ElementRef) { this.block = content; } show: boolean = false blockHeight: number constructor(){ } // ngOnInit(){ // this.blockHeight = this.block.nativeElement.clientHeight; // } ngAfterViewInit(){ this.blockHeight = this.block.nativeElement.clientHeight; console.log('AfterViewInit '+this.blockHeight); } showBlock(){ this.show = !this.show this.blockHeight = this.block.nativeElement.clientHeight; console.log('showBlock '+this.blockHeight); } }

You cannot get the height before it is displayed with ngIf (it simply isn't there). — Carsten
– Carsten, Commented May 4, 2018 at 6:17
So is there any way to know when it is there and then capture the height as soon as it is avaible — ttmt
– ttmt, Commented May 4, 2018 at 7:20
Possible duplicate of Event to fire when an angular *ngIf statement evaluates in template — luiscla27
– luiscla27, Commented May 8, 2019 at 0:36

John · Accepted Answer · 2018-05-04 06:18:52Z

What you have to do is wait for Angular to run its change detection when you show your html-element. Putting a setTimeout() inside your showBlock()-method, you wait a tick, and then the block element is defined (it is present in DOM). You cannot get the height of the element before it is shown, because it is not present in DOM.

In your showBlock method:

showBlock(){ this.show = !this.show setTimeout(()=>{ // wait a tick in order to get the element of block this.blockHeight = this.block.nativeElement.clientHeight; console.log('showBlock '+this.blockHeight); }); }

See updated Stackblitz

Sagar Kharche · Accepted Answer · 2018-05-04 06:22:52Z

You can use hidden instead of ngIf:-

<div> <button (click)="showBlock()">Show Block</button> </div> <div class="child-component" [hidden]="show" #block> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> </div>

And make use to remove display: block from .child-component class.

Gaurav Pandvia · Accepted Answer · 2018-11-01 21:14:14Z

I also faced a similar situation in which my Angular component was being rendered after ngIf condition and I wanted to use the height of the element to get some class. As John said above "What you have to do is wait for Angular to run its change detection when you show your html-element". But in his answer there is a problem sometimes, we might not know the time change detection takes to run, so after a tick was not working in my case. As there is no way to capture the *ngIf event, so what I did as a hack is call the function again inside the function which needs the height of element if the element's height is 0.See below

showBlock(){ let self = this; this.show = !this.show if(this.show && this.block.nativeElement.clientHeight == 0){ setTimeout(() => { self.showBlock(); },500); // After a tick execute again return; }//End If this.blockHeight = this.block.nativeElement.clientHeight; console.log('showBlock '+this.blockHeight); }

Collectives™ on Stack Overflow

Angular 4 event after element displayed with *ngIf

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related