2

So i'm building a chat app, everytime you send a message you will automatically scrolled to the bottom, and i use this code to do that

.html

<div class="chatContent" #scrollMe [scrollTop]="scrollMe.scrollHeight">

.ts

    @ViewChild('scrollMe') scrollMe;
    this.shouldScroll = this.scrollMe.scrollTop + this.scrollMe.clientHeight ===this.scrollMe.scrollHeight;
             if (!this.shouldScroll) {
               this.scrollToBottom();
             }
        
  scrollToBottom() {
    this.scrollMe.scrollTop = this.scrollMe.scrollHeight;
  }

and this error appear

enter image description here

i've seen this post Binding scrollTop directly in template gives error but still got that error after i refresh the page

naoval luthfi
  • 703
  • 7
  • 20

1 Answers1

1

Add detect change method so update DOM value.

import the ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

Also add in constructor

constructor( private cdr: ChangeDetectorRef)

Then add in your method when update scroll value.

 scrollToBottom() {
    this.scrollMe.scrollTop = this.scrollMe.scrollHeight;
    this.cdr.detectChanges();
  }
Vijay Prajapati
  • 738
  • 1
  • 7
  • 20
  • thanks! i implemented this solution already, https://stackoverflow.com/questions/43513421/ngif-expression-has-changed-after-it-was-checked similar tho, but he said that it only appears on dev mode – naoval luthfi Jul 07 '21 at 06:32