Execute method once div is displayed

Question

I have this component that has a "page" basically a div, called '#results-page', that is only displayed if there are results to display.

The easiest way to describe how it works is just to show you the code:

find-page.component.ts:

import { Component } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../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 by an event emitter when results come in. Then we set the showResults property to true, which causes the '#results-page' to display, and as soon as it displays, I want to scroll to the bottom of that div. I'm handling the scrollToAnchor.goToTargetBottom() just fine. However, the scrollToAnchor.goToTargetBottom() gets triggered too early (before the '#results-page' is displayed) so it does not scroll to the bottom of the '#results-page'.

How do I cause scrollToAnchor.goToTargetBottom() to execute, only after the '#results-page' is displayed?

Is it something you are looking for https://angular.io/docs/ts/latest/api/core/index/AfterViewChecked-class.html ? — Harry Ninh, Sep 02 '16 at 02:31
@HarryNinh This is causing me an endless loop of running the `ngAfterViewChecked()` function — BeniaminoBaggins, Sep 02 '16 at 04:30

score 0 · Answer 1 · edited May 23 '17 at 11:46

This answer explains what is happening. There is no clean solution that I'm aware of. I've made this hacky solution that works for my scenario where I have nothing inside the div for the time that I want it hidden:

Remove the *ngIf and always display the component.

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

Inside the component that you want to hide, add style bindings that will make it take up 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 you want to unhide it, set the height and padding as appropriate:

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

Execute method once div is displayed

1 Answers1