Search code examples
javascriptangular7

console error for "Expression has changed after it was checked"

I have a div in my parent component which apply different css classes based on some condition using [ngClass] and value for that condition is checked based on output decorators from child component and i face the below console error:

enter image description here

My parent component html div:-

 <div [ngClass]="{'alerton1': isAlertClass1 ,'alerton2': isAlertClass2,'alerton3': isAlertClass3,'alerton4': isAlertClass4,
        'alerton5': isAlertClass5,'alerton6': isAlertClass6 ,'alerton7': isAlertClass7, 'alertoff': isAlertClass}">

 <!-- top navbar-->
 <app-header class="topnavbar-wrapper"(activityData)="GetActivityDetail($event)"></app-header>

My parent component Ts code:-

GetActivityDetail(classname) {
        switch (classname) {
            case '1': {
                this.isAlertClass1 = true;
                this.isAlertClass2 = false;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                this.isAlertClass = false;
                break;
            }
            case '2': {
                this.isAlertClass1 = false;
                this.isAlertClass2 = true;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                this.isAlertClass = false;
                break;
            }
           default: {
                this.isAlertClass = true;
                this.isAlertClass1 = false;
                this.isAlertClass2 = false;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                break;
            }
}

My child component condition code:-

switch (i) {
            case 1: {
                this.activityData.emit('1');
                break;
            }
            case 2: {
                this.activityData.emit('2');
                break;
            }
     default: {
                this.activityData.emit('0');
                break;
            }
}
Solution

  • You can use ChangeDetectorRef Base class

    It provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as dirty, meaning that they have changed and need to be rerendered.

    import { ChangeDetectorRef } from '@angular/core';

constructor(protected cdr: ChangeDetectorRef) {}

ngOnInit() {
   this.cdr.detectChanges();
}