How to make the page to scroll down automatically to the bottom as soon as message is sent or message is opened in angular2

Question

i have a message conversation section, where in i need to show the scroll to the bottom, and when the page opens again the scroll must be at the bottom. i mean last message should be displayed first.

HTML:

<ul>
        <li *ngFor="let reply of message_show.messages">
          <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
          <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
          <p>{{reply.text}}</p>
        </li>
      </ul>

Ts:

loadMessages() {
    this.service
          .getMessages()
          .subscribe(
            data => {
              this.messagesdata = data;
              this.activeMessages = data.filter(msg => msg.active == true && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0)
              this.closedMessages = data.filter(msg => msg.active == false && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0);
              if (this.activeMessages.length > 0) {
                if(!this.message_show) {
                  var test = this.message_show = this.activeMessages[0];
                  this.message = true;
                  this.message_id = this.activeMessages[0].id;
                  this.message_show.messages.map(function(msg) {
                    if(msg.from_user_id == test.from_user_id) {
                      msg.from_user_image = test.from_user_image;
                    } else {
                      msg.from_user_image = test.to_user_image;
                    }
                    if(msg.to_user_id == test.to_user_id) {
                      msg.to_user_image = test.to_user_image;
                    } else {
                      msg.to_user_image = test.to_user_image;
                    }
                  })
                }
              }             
            },error => {});
  }

Sravan · Accepted Answer · 2018-04-30T06:02:18.330

Here is a solution in angular way:

I added #scrollCottom template variable.
You can use ViewChild to get the Element reference and should check the scroll bottom issue.

Component;

import { AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class YourComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollBottom') private scrollBottom: ElementRef;

    ngOnInit() {
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
     this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.scrollBottom.nativeElement.scrollTop = this.scrollBottom.nativeElement.scrollHeight;
        } catch(err) { }
    }
}

HTML:

<ul #scrollBottom>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <p>{{reply.text}}</p>
  </li>
</ul>

this i get Class 'MessageComponent' incorrectly implements interface 'AfterViewChecked'. Property 'ngAfterViewChecked' is missing in type 'MessageComponent'. — Bhrungarajni, Apr 30 '18 at 06:02
Is it the best way to achieve using ngAfterViewChecked? If you console out anything inside ngAfterViewChecked, you notice that it is executed infinitely — Protagonist, Apr 28 '21 at 15:02

score 5 · Answer 2 · answered Apr 30 '18 at 05:43

5

You can use

 window.scrollTo(0,document.body.scrollHeight);

Here you can find the discussion related

Scroll Automatically to the Bottom of the Page

answered Apr 30 '18 at 05:43

Lakshmi Prasanna

440
4
16

This was the best solution for me. Thanks! – Joshue Oct 24 '22 at 12:57

How to make the page to scroll down automatically to the bottom as soon as message is sent or message is opened in angular2

2 Answers2