angular - Execute method once div is displayed -

i have component has "page" div, called '#results-page', displayed if there results display.

the easiest way describe how works show code:

find-page.component.ts:

import { component } '@angular/core'; import { navbarcomponent } '../shared/navbar.component'; import { findformcomponent } '../find-page/find-form.component';  @component({    selector: 'find-page',    templateurl: 'app/find-page/find-page.component.html',    styleurls: ['app/find-page/find-page.component.css' ],    directives: [ findformcomponent ] }) export class findpagecomponent {    showresults = false;       onresultsrecieved(recieved: boolean) {         if ( recieved ) {            this.showresults = true;            scrolltoanchor.gototargetbottom("#results-page");         }else {            this.showresults = false;         }   } } 

find-page.component.html:

<div id="find-page">    <find-form (onresultsrecieved)="onresultsrecieved($event)"></find-form> </div> <div *ngif="showresults" id="results-page"> </div> 

oresultsrecieved() gets triggered event emitter when results come in. set showresults property true, causes '#results-page' display, , displays, want scroll bottom of div. i'm handling scrolltoanchor.gototargetbottom() fine. however, scrolltoanchor.gototargetbottom() gets triggered (before '#results-page' displayed) not scroll bottom of '#results-page'.

how cause scrolltoanchor.gototargetbottom() execute, after '#results-page' displayed?

this answer explains happening. there no clean solution i'm aware of. i've made hacky solution works scenario have nothing inside div time want hidden:

remove *ngif , display component.

<div id="results-page"> </div>

inside component want hide, add style bindings make take no screen space:

<div id="results" class="text-uppercase" [style.padding]="padding" [style.height]="height"> 

component.ts:

export class resultscomponent implements afterviewinit {   results: result[];   noresults: boolean;   padding = "0px";   height = "0px"; 

then once want unhide it, set height , padding appropriate:

this.padding = "10px 0px 50px 0px"; this.height = "inherit";