Fix error ExpressionChangedAfterItHasBeenCheckedError

Author: leovo2708

CHANGELOG.md

@@ -155,3 +155,9 @@ export class TreeviewConfig {
 - Upgrade to Angular 10.
 - Upgrade Bootstrap to 4.5.1
 - Remove fontawesome
+
+# [10.0.2](https://www.npmjs.com/package/ngx-treeview) (2020-07-07)
+
+### Enhancement:
+
+- Fix error ExpressionChangedAfterItHasBeenCheckedError

projects/ngx-treeview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-treeview",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "license": "MIT",
   "description": "An Angular treeview component with checkbox",
   "keywords": [

projects/ngx-treeview/src/lib/components/dropdown-treeview/dropdown-treeview.component.html

@@ -1,6 +1,6 @@
 <div class="dropdown" ngxDropdown>
   <button class="btn" [ngClass]="buttonClass" type="button" role="button" ngxDropdownToggle>
-    {{getText()}}
+    {{buttonLabel}}
   </button>
   <div ngxDropdownMenu aria-labelledby="dropdownMenu" (click)="$event.stopPropagation()">
     <div class="dropdown-container">

projects/ngx-treeview/src/lib/components/dropdown-treeview/dropdown-treeview.component.ts

@@ -19,7 +19,8 @@ export class DropdownTreeviewComponent {
   @Input() config: TreeviewConfig;
   @Output() selectedChange = new EventEmitter<any[]>(true);
   @Output() filterChange = new EventEmitter<string>();
-  @ViewChild(TreeviewComponent) treeviewComponent: TreeviewComponent;
+  @ViewChild(TreeviewComponent, { static: false }) treeviewComponent: TreeviewComponent;
+  buttonLabel: string;
 
   constructor(
     public i18n: TreeviewI18n,
@@ -28,11 +29,8 @@ export class DropdownTreeviewComponent {
     this.config = this.defaultConfig;
   }
 
-  getText(): string {
-    return this.treeviewComponent ? this.i18n.getText(this.treeviewComponent.selection) : '';
-  }
-
   onSelectedChange(values: any[]): void {
+    this.buttonLabel = this.i18n.getText(this.treeviewComponent.selection);
     this.selectedChange.emit(values);
   }
 

projects/ngx-treeview/src/lib/components/treeview/treeview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, SimpleChanges, OnChanges, TemplateRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, SimpleChanges, OnChanges, TemplateRef, OnInit } from '@angular/core';
 import { isNil, includes } from 'lodash';
 import { TreeviewI18n } from '../../models/treeview-i18n';
 import { TreeviewItem, TreeviewSelection } from '../../models/treeview-item';
@@ -47,7 +47,7 @@ class FilterTreeviewItem extends TreeviewItem {
   templateUrl: './treeview.component.html',
   styleUrls: ['./treeview.component.scss']
 })
-export class TreeviewComponent implements OnChanges {
+export class TreeviewComponent implements OnChanges, OnInit {
   @Input() headerTemplate: TemplateRef<TreeviewHeaderTemplateContext>;
   @Input() itemTemplate: TemplateRef<TreeviewItemTemplateContext>;
   @Input() items: TreeviewItem[];
@@ -67,7 +67,6 @@ export class TreeviewComponent implements OnChanges {
   ) {
     this.config = this.defaultConfig;
     this.allItem = new TreeviewItem({ text: 'All', value: undefined });
-    this.createHeaderTemplateContext();
   }
 
   get hasFilterItems(): boolean {
@@ -78,16 +77,18 @@ export class TreeviewComponent implements OnChanges {
     return `${this.config.maxHeight}`;
   }
 
+  ngOnInit(): void {
+    this.createHeaderTemplateContext();
+    this.generateSelection();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     const itemsSimpleChange = changes.items;
-    if (!isNil(itemsSimpleChange)) {
-      if (!isNil(this.items)) {
-        this.updateFilterItems();
-        this.updateCollapsedOfAll();
-        this.raiseSelectedChange();
-      }
+    if (!isNil(itemsSimpleChange) && !isNil(this.items)) {
+      this.updateFilterItems();
+      this.updateCollapsedOfAll();
+      this.raiseSelectedChange();
     }
-    this.createHeaderTemplateContext();
   }
 
   onAllCollapseExpand(): void {
@@ -125,7 +126,9 @@ export class TreeviewComponent implements OnChanges {
   raiseSelectedChange(): void {
     this.generateSelection();
     const values = this.eventParser.getSelectedChange(this);
-    this.selectedChange.emit(values);
+    setTimeout(() => {
+      this.selectedChange.emit(values);
+    });
   }
 
   private createHeaderTemplateContext(): void {

projects/ngx-treeview/src/lib/models/treeview-i18n.ts

@@ -14,7 +14,11 @@ export abstract class TreeviewI18n {
 export class DefaultTreeviewI18n extends TreeviewI18n {
   getText(selection: TreeviewSelection): string {
     if (selection.uncheckedItems.length === 0) {
-      return this.getAllCheckboxText();
+      if (selection.checkedItems.length > 0) {
+        return this.getAllCheckboxText();
+      } else {
+        return '';
+      }
     }
 
     switch (selection.checkedItems.length) {

src/app/app.component.html

@@ -2,7 +2,7 @@
   <a class="navbar-brand" href="#">ngx-treeview</a>
   <div class="navbar-nav mr-auto"></div>
   <a class="github-button" href="https://github.com/leovo2708/ngx-treeview" data-icon="octicon-star" data-size="large"
-    aria-label="Star leovo2708/ngx-treeview on GitHub">Star</a>
+    data-show-count="true" aria-label="Star leovo2708/ngx-treeview on GitHub">Star</a>
 </header>
 <div class="container-fluid">
   <div class="row">

src/app/city/city.component.ts

@@ -12,7 +12,7 @@ import { CityTreeviewI18n } from './city-treeview-i18n';
   ]
 })
 export class CityComponent implements OnInit {
-  @ViewChild(DropdownTreeviewComponent) dropdownTreeviewComponent: DropdownTreeviewComponent;
+  @ViewChild(DropdownTreeviewComponent, { static: false }) dropdownTreeviewComponent: DropdownTreeviewComponent;
   cities: City[];
   selectedCities: City[];
   unselectedCities: City[];

src/app/default-treeview-i18n.ts

@@ -12,7 +12,11 @@ export class DefaultTreeviewI18n extends TreeviewI18n {
 
   getText(selection: TreeviewSelection): string {
     if (selection.uncheckedItems.length === 0) {
-      return this.i18n.language === 'en' ? 'All' : 'Tất cả';
+      if (selection.checkedItems.length > 0) {
+        return this.i18n.language === 'en' ? 'All' : 'Tất cả';
+      } else {
+        return '';
+      }
     }
 
     switch (selection.checkedItems.length) {

src/app/dropdown-treeview-select/dropdown-treeview-select.component.ts

@@ -18,7 +18,7 @@ export class DropdownTreeviewSelectComponent implements OnChanges {
   @Input() items: TreeviewItem[];
   @Input() value: any;
   @Output() valueChange = new EventEmitter<any>();
-  @ViewChild(DropdownTreeviewComponent) dropdownTreeviewComponent: DropdownTreeviewComponent;
+  @ViewChild(DropdownTreeviewComponent, { static: false }) dropdownTreeviewComponent: DropdownTreeviewComponent;
   filterText: string;
   private dropdownTreeviewSelectI18n: DropdownTreeviewSelectI18n;
 

src/app/product/product.component.ts

@@ -25,7 +25,7 @@ export class ProductTreeviewConfig extends TreeviewConfig {
   ]
 })
 export class ProductComponent implements OnInit {
-  @ViewChild(TreeviewComponent) treeviewComponent: TreeviewComponent;
+  @ViewChild(TreeviewComponent, { static: false }) treeviewComponent: TreeviewComponent;
   items: TreeviewItem[];
   rows: string[];
 
@@ -58,7 +58,7 @@ export class ProductComponent implements OnInit {
     let isRemoved = false;
     for (const tmpItem of this.items) {
       if (tmpItem === item) {
-        remove(this.items, item);
+        this.items = remove(this.items, item);
       } else {
         isRemoved = TreeviewHelper.removeItem(tmpItem, item);
         if (isRemoved) {

src/app/room/room.component.html

@@ -13,7 +13,7 @@ <h3>Performance (
     <form class="d-inline-block">
       <label class="col-form-label mr-sm-2">Item category</label>
       <div class="d-inline-block">
-        <ngx-dropdown-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
+        <ngx-dropdown-treeview [config]="config" [items]="rooms" (selectedChange)="values = $event">
         </ngx-dropdown-treeview>
       </div>
     </form>

src/app/room/room.component.ts

@@ -10,7 +10,7 @@ import { RoomService } from './room.service';
   ]
 })
 export class RoomComponent implements OnInit {
-  items: TreeviewItem[];
+  rooms: TreeviewItem[];
   values: any[];
   config = TreeviewConfig.create({
     hasAllCheckBox: true,
@@ -24,6 +24,6 @@ export class RoomComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.items = this.service.getRooms();
+    this.service.getRooms().subscribe(rooms => this.rooms = rooms);
   }
 }

src/app/room/room.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 import { TreeviewItem } from 'ngx-treeview';
+import { Observable, of } from 'rxjs';
 
 @Injectable()
 export class RoomService {
-  getRooms(): TreeviewItem[] {
+  getRooms(): Observable<TreeviewItem[]> {
     const items: TreeviewItem[] = [];
     for (let i = 0; i < 1000; i++) {
       const value: any = i === 0 ? { name: `${i}` } : i;
@@ -16,6 +17,6 @@ export class RoomService {
       items.push(item);
     }
 
-    return items;
+    return of(items);
   }
 }

src/index.html

@@ -10,7 +10,7 @@
 
 <body>
   <ngx-app>Loading...</ngx-app>
-  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <script src="https://buttons.github.io/buttons.js"></script>
 </body>
 
 </html>