Generating random id attribute causing ExpressionChangedAfterItHasBeenCheckedError

Question

Im trying to create bootstrap Togglable tabs from data that I get from static json file I'm loading on component init. For the tabs I need to generate random id for the tabpanel and for href attribute on tablist.

What I get as a result WORKS but I do see this error in the console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'j5e0vxl5-lua'. Current value: 'j5e0vxlz-5xl'.
at viewDebugError (core.es5.js:8418)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396)
at checkBindingNoChanges (core.es5.js:8560)
at checkNoChangesNodeInline (core.es5.js:12421)
at checkNoChangesNode (core.es5.js:12395)
at debugCheckNoChangesNode (core.es5.js:13172)
at debugCheckRenderNodeFn (core.es5.js:13112)
at Object.eval [as updateRenderer] (WorkflowComponent.html:116)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
at checkNoChangesView (core.es5.js:12217)

WorkflowComponent.html

<div class="col-sm-12" [attr.random]="randomText(true)">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation">
            <a [attr.href]="'#random-'+randomText()" [attr.aria-controls]="'random-'+randomText()" role="tab" data-toggle="tab">
                <strong>Tab name</strong>
            </a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" [attr.id]="'random-'+randomText()">
            <div>
                <p>Tab content</p>
            </div>
        </div>
    </div>
</div>

workflow.components.ts randomText method

randomText(generateRndmText = false) {
    if ( generateRndmText ) {
        this._rndmText = (Math.random() + (+new Date)).toString(36).replace('.', '-');
    }
    console.log('RANDOM: ' + this._rndmText);
    return this._rndmText;
}

Possible duplicate of [Expression \_\_\_ has changed after it was checked](https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked) — AT82, Jul 21 '17 at 15:48
I just jumped onto this project and I'm doing my reading and education in parallel. I'm pretty sure I'm on the wrong side of this but if someone can just clear it out for now I'd be very thankful. Or at least point me to the documentation where I can learn more about it. — Vedran, Jul 21 '17 at 15:53
This article [Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) explains the error in great details — Max Koretskyi, Jul 21 '17 at 15:56

Vedran · Accepted Answer · 2017-07-24T08:35:37.323

Thank you @Maximus for the link. It helped me to understand why this is happening.

I have changed my design and used index from the ngFor this is wrapped in, which is now working fine.

But I'm still curious if there is a way of implementing such a method that will change values while the digest is in progress. The reason is I do not need the data from that variable once it's changed and it's whole purpose is to give references to the DOM objects. As far as I'm concerned it can be undefined once the digest is done.

Generating random id attribute causing ExpressionChangedAfterItHasBeenCheckedError

1 Answers1