0

My question is: how can I still update the [scrolltop] after the check without getting the error?

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'scrollTop': '260'. Current value: '300'.

I have a variable where I push data in and because of that the variable string gets longer and longer and so the div gets bigger and I want to be always at the bottom of the divbox

component.html:

<div #logbox [scrollTop]="content.length === 0 ? 0 : logbox.scrollHeight" class="logbox">
{{content}}
<div *ngIf="!content" style="width: 100%; text-align: center; margin: 50px">No logs available</div>
</div>

component.css:

.logbox{
    font-family: monospace; 
    overflow: hidden auto; 
    overflow-wrap:break-word; 
    white-space:pre-wrap; 
    height: 100%;
}

component.ts

export class LogboxComponent implements OnInit {
  constructor() { }
  @Input() content:string;
  ngOnInit(): void {
  }
}
Ranhousecode
  • 23
  • 7
  • Does this answer your question? [Expression \_\_\_ has changed after it was checked](https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked). Also [this one](https://stackoverflow.com/questions/43513421/ngif-expression-has-changed-after-it-was-checked) or [this](https://stackoverflow.com/questions/45467881/expressionchangedafterithasbeencheckederror-expression-has-changed-after-it-was) can help you – Elikill58 Oct 04 '21 at 14:51

0 Answers0