In my message conversation section, I want to ensure that the scroll is always at the bottom. When the page is reopened, the 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 => {});
}