ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'.

[Goutham]

Hi ,

i am using list box control as below

html:

<ejs-listbox [dataSource]='data' [selectionSettings]='selectionSettings' value="">

  <ng-template #itemTemplate let-data>

    {{data|json}}

  </ng-template>

</ejs-listbox>

ts:

 selectionSettings: SelectionSettingsModel = { showCheckbox: true}

  public data: { [key: string]: Object }[] = [

    { text: 'Hennessey Venom', id: 'list-01' },

    { text: 'Bugatti Chiron', id: 'list-02' },

    { text: 'Bugatti Veyron Super Sport', id: 'list-03' },

    { text: 'SSC Ultimate Aero', id: 'list-04' },

    { text: 'Koenigsegg CCR', id: 'list-05' },

    { text: 'McLaren F1', id: 'list-06' },

    { text: 'Aston Martin One- 77', id: 'list-07' },

    { text: 'Jaguar XJ220', id: 'list-08' },

    { text: 'McLaren P1', id: 'list-09' },

    { text: 'Ferrari LaFerrari', id: 'list-10' }

  ];
But i am getting below error

Could you please help me to resolve this error?
Versions:

  "@syncfusion/ej2-angular-base": "^18.4.49",

    "@syncfusion/ej2-angular-buttons": "^18.4.46",

    "@syncfusion/ej2-angular-calendars": "^18.4.48",

    "@syncfusion/ej2-angular-dropdowns": "^18.4.49",

    "@syncfusion/ej2-angular-filemanager": "^18.4.41",

    "@syncfusion/ej2-angular-grids": "^18.4.49",

    "@syncfusion/ej2-angular-inplace-editor": "^19.1.63",

    "@syncfusion/ej2-angular-inputs": "^18.4.47",

    "@syncfusion/ej2-angular-layouts": "^18.4.49",

    "@syncfusion/ej2-angular-lists": "^18.4.39",

    "@syncfusion/ej2-angular-navigations": "^18.4.47",

    "@syncfusion/ej2-angular-notifications": "^18.4.39",

    "@syncfusion/ej2-angular-popups": "^18.4.44",

    "@syncfusion/ej2-angular-progressbar": "^18.4.39",

    "@syncfusion/ej2-angular-richtexteditor": "^18.4.49",

    "@syncfusion/ej2-angular-schedule": "^18.4.49",

    "@syncfusion/ej2-angular-splitbuttons": "^18.4.41",

[Aravinthan Seetharaman]

Hi Goutham, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We can resolve your reported issue in sample level by using Angular ngAfterViewInit() method. Please refer the below code snippet and sample. 

 

app.component.html 

 

<ejs-listbox [dataSource]="dataSource"> 

  <ng-template #itemTemplate let-data> 

    <span> {{data.text|json}} <ejs-checkbox></ejs-checkbox></span> 

  </ng-template> 

</ejs-listbox> 

 

 

app.component.ts 

 

export class AppComponent { 

  // dataSource definition 

  public dataSource; 

  public data: { [key: string]: Object }[] = [ 

    { text: 'Hennessey Venom', id: 'list-01' }, 

    { text: 'Bugatti Chiron', id: 'list-02' }, 

    { text: 'Bugatti Veyron Super Sport', id: 'list-03' }, 

    { text: 'SSC Ultimate Aero', id: 'list-04' }, 

    { text: 'Koenigsegg CCR', id: 'list-05' }, 

    { text: 'McLaren F1', id: 'list-06' }, 

    { text: 'Aston Martin One- 77', id: 'list-07' }, 

    { text: 'Jaguar XJ220', id: 'list-08' }, 

    { text: 'McLaren P1', id: 'list-09' }, 

    { text: 'Ferrari LaFerrari', id: 'list-10' } 

  ]; 

  ngAfterViewInit() { 

    setTimeout(() => { 

      this.dataSource = this.data; 

    }); 

  } 

} 

 

 

And we suspect that you are trying to use CheckBox in ListBox Item. While using ItemTemplate, whatever given in template alone render in list item. So, if you need to use Checkbox then you can render CheckBox separately as in the below code snippet and handle events in your end. 

 

 

<ng-template #itemTemplate let-data> 

    <span> {{data.text|json}} <ejs-checkbox></ejs-checkbox></span> 

  </ng-template> 

 

 

Sample: https://stackblitz.com/edit/angular-kstvip?file=app.component.html  

 

Could you please check the above details and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S

[Goutham]

Hi,

By using AfterViewInit logic i am able to resolve the issue.Thank you.
But can i have chance to know why this issue is coming when directly assigning data at initial stages?

[Aravinthan Seetharaman]

Hi Goutham, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved.  

 

Query: why this issue is coming when directly assigning data at initial stages? 

 

Ans: Please refer the below link. 

 

Angular Error Reference Link: https://angular.io/errors/NG0100  

 

Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S