Angular Error NG0100: ExpressionChangedAfterItHasBeenCheckedError everytime i scroll

user_8503317 0
Viewed 629

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

angular typescript
1 Answers

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();
  }
user_93150980
Related