1. Home
  2. Forum
  3. Angular - EJ 2
  4. ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'.

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

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",

3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team May 20, 2021 12:37 PM UTC

 
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> 
 
 
 
Could you please check the above details and get back to us if you need assistance on this. 
 
Regards, 
Aravinthan S

GO Goutham May 21, 2021 05:12 AM UTC

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?

Marked as answer
AS Aravinthan Seetharaman Syncfusion Team May 24, 2021 03:25 PM UTC

 
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  


Loader.
Up arrow icon