ExpressionChangedAfterItHasBeenCheckedError when a component placed inside splitter panel

[Aruna]

Hi Team,

I have a Splitter layout and a sample TreeGrid inside a split panel. When the page is loaded, below console error appears.

ERROR

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '1'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook? Find more at https://angular.io/errors/NG0100

I have reproduced the said scenario in below sample.
https://stackblitz.com/edit/angular-wmmmdc-wxaufg?devToolsHeight=33&file=src/app.component.ts

Seeking support to solve this issue.


AppModule:

@NgModule({

  declarations: [AppComponent, MySplitterComponent, MyTreeGridComponent],

  imports: [CommonModule, BrowserModule, SplitterModule, TreeGridModule],

  providers: [ToolbarService, FilterService],

  bootstrap: [AppComponent],

})

export class AppModule {}

MySplitterComponent:

@Component({

  selector: 'my-splitter',

  template: ` <div

    id="container"

    style="height: 100%;">

    <ejs-splitter height="100%">

      <e-panes>

        <e-pane size="200px">

          <ng-template #content>

            <h3>1</h3>  

          </ng-template>

        </e-pane>

        <e-pane>

          <ng-template #content>

            <my-treegrid></my-treegrid>

          </ng-template>

        </e-pane>

      </e-panes>

    </ejs-splitter>

  </div>`,

})

export class MySplitterComponent {

  constructor() {}

}

MyTreeGridComponent

@Component({

  selector: 'my-treegrid',

  template: `

  <ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' hasChildMapping='isParent' parentIdMapping='ParentItem' idMapping='TaskID' 

    [allowPaging]="true"

    [toolbar]="toolbar"

    >

        <e-columns>

            <e-column field='TaskID' headerText='Task ID' width='90' textAlign='Right'></e-column>

            <e-column field='TaskName' headerText='Task Name' width='170'></e-column>

            <e-column field='StartDate' headerText='Start Date' width='130' format="yMd" textAlign='Right'></e-column>

            <e-column field='Duration' headerText='Duration' width='80' textAlign='Right'></e-column>

        </e-columns>

      </ejs-treegrid>`,

})

export class MyTreeGridComponent implements OnInit {

  public data: DataManager;

  public toolbar!: [string];

  constructor() {}

  ngOnInit(): void {

    this.toolbar = ['Search'];

    this.data = new DataManager({

      url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData',

      adaptor: new WebApiAdaptor(),

      crossDomain: true,

    });

    

  }

}

Regards,

Aruna.

[Mallesh Ravi Chandran]

Hi Aruna,

We have checked the code you provided and found that invoking setTimeout with a delay of zero can resolve this issue. Please refer to the below code and sample for your reference.

 @Component({

  selector: 'my-splitter',

  template: `<ejs-splitter height="100%">

      <e-panes>

        <e-pane size="200px">

          <ng-template #content>

            ………..

          </ng-template>

        </e-pane>

        <e-pane>

          <ng-template #content>

              <ng-template #container> </ng-template>

          </ng-template>

        </e-pane>

      </e-panes>

    </ejs-splitter>

  </div>`,

})

……

ngAfterViewInit() {

    setTimeout(() => {

      const componentFactory =

        this.componentFactoryResolver.resolveComponentFactory(

          MyTreeGridComponent

        );

 

      // add the component to the view

      const componentRef = this.container.createComponent(componentFactory);

 

    }, 0);

  }

Sample: https://stackblitz.com/edit/angular-wmmmdc-kkpk7c?devToolsHeight=33&file=src%2Fsplitter.component.ts,src%2Ftreegrid.component.ts

regards,

Mallesh 

[Aruna]

Hi Mallesh,

Thank you for the solution provided. 

I'd like to know in depth why we encountering ExpressionChangedAfterItHasBeenChecked error when I use multiple  nested Syncfusion components defined in html template.

Is there any asynchronous mechanism in Syncfusion component rendering which cause this change detection issue? 

Is there any cleaner way to solve  change detection issue without using componentFactory  ?

Regards,

Aruna.

[UdhayaKumar Duraisamy]

The reason you are encountering the ExpressionChangedAfterItHasBeenChecked error when using multiple nested Syncfusion components is due to the way Angular's change detection mechanism works. Angular's change detection mechanism ensures that all the bindings in the component tree are up to date and synchronized. This is achieved through a series of checks and updates that take place in a specific order.

When the change detection mechanism detects a change, it performs a full round of change detection to ensure that all the bindings are up to date. However, if a change is detected during the change detection process, it will trigger another round of change detection. This can lead to an infinite loop of change detection and cause performance issues.

In your case, the Syncfusion component rendering is asynchronous, which means that it can cause changes to occur after the initial change detection cycle has completed. This can result in the ExpressionChangedAfterItHasBeenChecked error being thrown.

Using the componentFactoryResolver and setTimeout method is a way to solve this change detection issue. By deferring the creation of the component until after the change detection cycle has completed, we can ensure that the bindings are up to date and prevent the error from being thrown.

Another approach to solving this issue is to use the ChangeDetectorRef.detectChanges() method to trigger a manual change detection cycle after the component has been initialized. This will force Angular to re-evaluate the bindings and update the view if necessary.

We hope this helps to clarify why you are encountering the ExpressionChangedAfterItHasBeenChecked error and provides some alternative solutions to the issue. If you have any further questions, please feel free to ask.