typescript - angular2 scroll to bottom (chat style) -

i have set of single cell components within ng-for loop. have in place cannot seem figure out proper

currently have a

settimeout(() => {   scrolltobottom(); }); 

but doesn't work time images asynchronously push viewport down.

whats appropriate way scroll bottom of chat window in angular2?

i had same problem, i'm using afterviewchecked , @viewchild combination (angular2 beta.3).

the component:

import {..., afterviewchecked, elementref, viewchild, oninit} 'angular2/core' @component({     ... }) export class channelcomponent implements oninit, afterviewchecked {     @viewchild('scrollme') private myscrollcontainer: elementref;      ngoninit() {          this.scrolltobottom();     }      ngafterviewchecked() {                 this.scrolltobottom();             }       scrolltobottom(): void {         try {             this.myscrollcontainer.nativeelement.scrolltop = this.myscrollcontainer.nativeelement.scrollheight;         } catch(err) { }                      } } 

the template:

<div #scrollme style="overflow: scroll; height: xyz;">     <div class="..."          *ngfor="..."         ...>       </div> </div> 

of course pretty basic. afterviewchecked triggers every time view checked:

implement interface notified after every check of component's view.

if have input-field sending messages instance event fired after each keyup (just give example). if save whether user scrolled manually , skip scrolltobottom() should fine.