0

I am working on an Angular 5 project. In my project I have chat box like element. I am listing the comments in a ul, its height is fixed with overflow-y: auto. Like a standard chat box I have to show the very bottom of this scrollable ul. So when a new comment is added it will be coming at the bottom of the ul and I have to scroll to the bottom. In order to achieve this I am binding the scrollTop property of this ul to the scrollHeight as follows,

<ul class="comment-list" #commentEl [scrollTop]="commentEl.scrollHeight">
    <li *ngFor="let comment of comments">{{ comment }}</li>
</ul>

I am getting an error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '851'. Current value: '0' while initializing this component and destroying this component. How can I fix this issue?

shafeequemat
  • 1,002
  • 2
  • 17
  • 22

1 Answers1

8

Wrap the ul tag in a div element and reference the DOM using viewChild decorator.

HTML

<div style="height:200px;width:100%;overflow-y:auto" #commentEl [scrollTop]="scrolltop">
    <ul class="comment-list">
        <li *ngFor="let comment of comments">{{ comment }}</li>
    </ul>
</div>

TS

@ViewChild('commentEl') comment: ElementRef;  
scrolltop: number = null;

And give where you add the comments

this.scrolltop = this.comment.nativeElement.scrollHeight;

demo link

Yuri
  • 4,254
  • 1
  • 29
  • 46
Abinesh Joyel
  • 2,043
  • 2
  • 13
  • 18
  • This approach will not solve the error. This is same as my code. The only difference is that you wrapped the element in a div. I tried your solution. But the error still exists – shafeequemat Apr 17 '18 at 05:29
  • do you checked the demo link. Can i know what exactly you need I think i misunderstand you – Abinesh Joyel Apr 17 '18 at 05:30
  • Scrolling to the bottom is working fine. But please have a look at the question again. When the component is destroyed I am getting an error as I mentioned in the question. – shafeequemat Apr 17 '18 at 05:34
  • can i know how your component is created and destroyed. Whether it is dynamic component – Abinesh Joyel Apr 17 '18 at 05:56
  • This component is called inside an Angular Material tab. The component is initialized when the corresponding tab is active and destroyed when moved to another tab. – shafeequemat Apr 17 '18 at 06:01
  • i updated what you said can you check with this [link](https://stackblitz.com/edit/angular-ranet6-m9pp7j?file=app%2Ftest1%2Ftest1.component.html) – Abinesh Joyel Apr 17 '18 at 06:32
  • Thank you soo much... initially when the page gets rendered... the data was undefined. So, my solution to fix that was `setTimeout` – Parth Developer Feb 22 '21 at 15:30
  • can someone help me here ?https://stackoverflow.com/questions/68279766/angular-error-ng0100-expressionchangedafterithasbeencheckederror-everytime-i-sc – naoval luthfi Jul 07 '21 at 04:17
  • can someone help me here ?https://stackoverflow.com/questions/68279766/angular-error-ng0100-expressionchangedafterithasbeencheckederror-everytime-i-sc – naoval luthfi Jul 07 '21 at 04:20