import { Component , OnInit , Input , AfterViewInit , ViewChild , ViewChildren , QueryList , ElementRef } from '@angular/core' ; import { Message } from '@app/models' ; import { MessageItemComponent } from '@app/components/message-item/message-item.component' ; @ Component ( { selector : 'message-list' , templateUrl : './message-list.component.html' , styleUrls : [ './message-list.component.scss' ] } ) export class MessageListComponent implements OnInit , AfterViewInit { @ Input ( 'messages' ) private messages : Message [ ] ; @ ViewChild ( 'chatlist' , { read : ElementRef } ) chatList : ElementRef ; @ ViewChildren ( MessageItemComponent , { read : ElementRef } ) chatItems : QueryList < MessageItemComponent > ; constructor ( ) { } ngAfterViewInit ( ) { this . chatItems . changes . subscribe ( elements => { this . scrollToBottom ( ) ; } ) ; } private scrollToBottom ( ) { try { this . chatList . nativeElement . scrollTop = this . chatList . nativeElement . scrollHeight ; } catch ( err ) { console . log ( 'Could not find the "chatList" element.' ) ; } } ngOnInit ( ) { } }