Angular 2 Scroll to bottom Chat style

Question

I have a set of single cell components within an ng-for loop   I have everything in place but I cannot seem to figure out the proper  Currently I have   setTimeout      gt      scrollToBottom          But this doesn t work all the time as images asynchronously push the viewport down   Whats the appropriate way to scroll to the bottom of a chat window in Angular 2

User · Answer

The accepted answer fires while scrolling through the messages, this avoids that.

You want a template like this.

<div #content>
  <div #messages *ngFor="let message of messages">
    {{message}}
  </div>
</div>

Then you want to use a ViewChildren annotation to subscribe to new message elements being added to the page.

@ViewChildren('messages') messages: QueryList<any>;
@ViewChild('content') content: ElementRef;

ngAfterViewInit() {
  this.scrollToBottom();
  this.messages.changes.subscribe(this.scrollToBottom);
}

scrollToBottom = () => {
  try {
    this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
  } catch (err) {}
}

User · Answer

Consider using    scrollIntoView     See https   developer mozilla org en-US docs Web API Element scrollIntoView

User · Answer

I added a check to see if the user tried to scroll up   I m just going to leave this here if anyone wants it      lt div class  jumbotron  gt       lt div class  messages-box   scrollMe  scroll   onScroll    gt           lt app-message  message   message   userId   profile userId   ngFor  let message of messages slice   reverse    gt  lt  app-message gt       lt  div gt        lt textarea   ngModel    newMessage   keyup enter   submitMessage    gt  lt  textarea gt   lt  div gt    and the code   import   AfterViewChecked  ElementRef  ViewChild  Component  OnInit   from   angular core   import  AuthService  from     auth service   import  rxjs add operator catch   import  rxjs add operator map   import  rxjs add operator switchMap   import  rxjs add operator concatAll   import  Observable  from  rxjs Rx    import   Router  ActivatedRoute   from   angular router     Component       selector   app-messages       templateUrl     messages component html       styleUrls      messages component scss      export class MessagesComponent implements OnInit        ViewChild  scrollMe   private myScrollContainer  ElementRef      messages Array lt MessageModel gt      newMessage          id          conversations  Array lt ConversationModel gt      profile  ViewMyProfileModel     disableScrollDown   false      constructor private authService AuthService                  private route ActivatedRoute                  private router Router                  private conversationsApi ConversationsApi               ngOnInit                 public submitMessage                  ngAfterViewChecked             this scrollToBottom               private onScroll             let element   this myScrollContainer nativeElement         let atBottom   element scrollHeight - element scrollTop     element clientHeight         if  this disableScrollDown  amp  amp  atBottom                this disableScrollDown   false           else               this disableScrollDown   true                       private scrollToBottom    void           if  this disableScrollDown                return                   try               this myScrollContainer nativeElement scrollTop   this myScrollContainer nativeElement scrollHeight            catch err

User · Answer

I had the same problem  I m using a AfterViewChecked and  ViewChild combination  Angular2 beta 3    The Component   import       AfterViewChecked  ElementRef  ViewChild  OnInit  from  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    lt div  scrollMe style  overflow  scroll  height  xyz   gt       lt div class                 ngFor                   gt         lt  div gt   lt  div gt    Of course this is pretty basic  The AfterViewChecked triggers every time the view was checked      Implement this interface to get notified after every check of your component s view    If you have an input-field for sending messages for instance this event is fired after each keyup  just to give an example   But if you save whether the user scrolled manually and then skip the scrollToBottom   you should be fine

User · Answer

Here s another good solution on stackblitz  Alternatively  The accepted answer is a good solution  but it can be improved since your content chat may often scroll to the bottom involuntarily given how the ngAfterViewChecked   lifecycle hook works  Here s an improved version    COMPONENT import       AfterViewChecked  ElementRef  ViewChild  OnInit  from  angular2 core   Component              export class ChannelComponent implements OnInit  AfterViewChecked        ViewChild  scrollMe   private myScrollContainer  ElementRef          Add the variable        scrolledToBottom   false       ngAfterViewChecked                     this scrollToBottom                        scrollToBottom    void           try                Add the condition              if  this scrolledToBottom                this myScrollContainer nativeElement scrollTop   this myScrollContainer nativeElement scrollHeight                           catch err                                     Add the method        onScroll          this scrolledToBottom   true           TEMPLATE  lt  --Add a scroll event listener-- gt   lt div  scrollMe       style  quot overflow  scroll  height  xyz  quot        scroll   quot onScroll   quot  gt       lt div class  quot     quot            ngFor  quot     quot              gt         lt  div gt   lt  div gt

User · Answer

After reading other solutions  the best solution I can think of  so you run only what you need is the following  You use ngOnChanges to detect the proper change  ngOnChanges       if  changes messages          let chng   changes messages        let cur    chng currentValue        let prev   chng previousValue        if cur  amp  amp  prev               lazy load case         if  cur 0  id    prev 0  id              this lazyLoadHappened   true                       new message         if  cur cur length -1  id    prev prev length -1  id              this newMessageHappened   true                               And you use ngAfterViewChecked to actually enforce the change before it renders but after the full height is calculated  ngAfterViewChecked    void       if this newMessageHappened          this scrollToBottom          this newMessageHappened   false            else if this lazyLoadHappened             keep the same scroll       this lazyLoadHappened   false             If you are wondering how to implement scrollToBottom   ViewChild  scrollWrapper   private scrollWrapper  ElementRef  scrollToBottom        try         this scrollWrapper nativeElement scrollTop   this scrollWrapper nativeElement scrollHeight        catch err

User · Answer

Simplest and the best solution for this is    Add this  scrollMe  scrollTop   scrollMe scrollHeight  simple thing on Template side    lt div style  overflow  scroll  height  xyz    scrollMe  scrollTop   scrollMe scrollHeight  gt       lt div class                 ngFor                   gt         lt  div gt   lt  div gt      Here is the link for WORKING DEMO  With dummy chat app  AND FULL CODE     Will work with Angular2 and also upto 5  As above demo is done in   Angular5         Note        For error   ExpressionChangedAfterItHasBeenCheckedError       Please check your css it s a issue of css side not the Angular side     One of the user  KHAN has solved that by removing overflow auto  height  100   from div   please check conversations for detail

User · Answer

If you want to be sure  that you are scrolling to the end after  ngFor is done  you can use this    lt div  myList gt    lt div  ngFor  let item of items  let last   last  gt      item title       last   scrollToBottom            lt  div gt   lt  div gt   scrollToBottom      this myList nativeElement scrollTop   this myList nativeElement scrollHeight      Important here  the  last  variable defines if you are currently at the last item  so you can trigger the  scrollToBottom  method

User · Answer

this contentList nativeElement scrollTo  left  0   top  this contentList nativeElement scrollHeight  behavior   smooth

User · Answer

Sharing my solution  because I was not completely satisfied with the rest  My problem with AfterViewChecked is that sometimes I m scrolling up  and for some reason  this life hook gets called and it scrolls me down even if there were no new messages  I tried using OnChanges but this was an issue  which lead me to this solution  Unfortunately  using only DoCheck  it was scrolling down before the messages were rendered  which was not useful either  so I combined them so that DoCheck is basically indicating AfterViewChecked if it should call scrollToBottom   Happy to receive feedback   export class ChatComponent implements DoCheck  AfterViewChecked         Input   public messages  Message              ViewChild  scrollable   private scrollable  ElementRef       private shouldScrollDown  boolean      private iterableDiffer       constructor private iterableDiffers  IterableDiffers            this iterableDiffer   this iterableDiffers find     create null              ngDoCheck    void           if  this iterableDiffer diff this messages                 this numberOfMessagesChanged   true                       ngAfterViewChecked    void           const isScrolledDown   Math abs this scrollable nativeElement scrollHeight - this scrollable nativeElement scrollTop - this scrollable nativeElement clientHeight   lt   3 0           if  this numberOfMessagesChanged  amp  amp   isScrolledDown                this scrollToBottom                this numberOfMessagesChanged   false                       scrollToBottom             try               this scrollable nativeElement scrollTop   this scrollable nativeElement scrollHeight            catch  e                console error e                        chat component html   lt div class  chat-wrapper  gt        lt div class  chat-messages-holder   scrollable gt            lt app-chat-message  ngFor  let message of messages   message   message  gt           lt  app-chat-message gt        lt  div gt        lt div class  chat-input-holder  gt           lt app-chat-input  send   onSend  event   gt  lt  app-chat-input gt       lt  div gt    lt  div gt    chat component sass   chat-wrapper   display  flex   justify-content  center   align-items  center   flex-direction  column   height  100      chat-messages-holder     overflow-y  scroll  important     overflow-x  hidden     width  100      height  100

User · Answer

const element   document getElementById  box    element scrollIntoView   behavior   smooth   block   end   inline   nearest

User · Answer

In case anyone has this problem with Angular 9  this is how I manage to fix it  I started with the solution with  scrollMe  scrollTop   quot scrollMe scrollHeight quot  and I got the ExpressionChangedAfterItHasBeenCheckedError error as people mentioned  In order to fix this  one I just add in my ts component   Component       changeDetection  ChangeDetectionStrategy OnPush          constructor private cdref  ChangeDetectorRef       ngAfterContentChecked             this cdref detectChanges           ExpressionChangedAfterItHasBeenCheckedError  Expression has changed after it was checked  Previous value    39 undefined  39

User · Answer

In angular using material design sidenav I had to use the following   let ele   document getElementsByClassName  md-sidenav-content        let eleArray    lt Element   gt Array prototype slice call ele       eleArray map  val   gt            val scrollTop   val scrollHeight

User · Answer

Vivek s answer has worked for me  but resulted in an expression has changed after it was checked error  None of the comments worked for me  but what I did was change the change detection strategy   import    Component  ChangeDetectionStrategy   from   angular core    Component     changeDetection  ChangeDetectionStrategy OnPush    selector   page1     templateUrl   page1 html

[scroll] Angular 2 Scroll to bottom (Chat style)

Examples related to scroll

Examples related to typescript

Examples related to angular