ExpressionChangedAfterItHasBeenCheckedError, when conditionally setting an element attribute

Question

I am conditionally adding title attributes to elements like so:

<div #optionEl class="option-title" [attr.title]="isTitleTruncated(optionEl) ? option.title : null">
    {{option.title}}
</div>

which calls:

isTitleTruncated(e) {
    return (e.offsetWidth < e.scrollWidth);
}

For cases where the title does get applied, getting:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'title: null'. Current value: 'title: A very long piece of text'

I'm unsure why this is happening, can someone point out why or what could be the possible reasons?

You can read more about the various reasons causing the same problem, [Click here](https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained) — RajeshKdev, Oct 31 '18 at 12:48

score 1 · Answer 1 · answered Oct 31 '18 at 12:43

This error also occurs when the attribute value changes more than once before rendering/binding initial value/operation to the view attribute.

For example:

Lets say you have a flag variable isTitleTruncated and initial value is false, when view loads it will try to assign value. while doing this binding assignment work, if the flag value gets reassigned to true or false again, then this leads to ExpressionChangedAfterItHasBeenCheckedError.

Because, What angular does here:

Angular runs change detection until the model stabilizes, it might run forever. If Angular doesn't run change detection, then the view might not reflect the current state of the model.

You have to check where the variable value gets reassigned and update only once when view renders. — RajeshKdev, Oct 31 '18 at 14:04

ExpressionChangedAfterItHasBeenCheckedError, when conditionally setting an element attribute

1 Answers1