From f813ffcf72bab376e050cbc5b28d201e1381be5c Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 18 Jun 2022 17:27:38 -0400
Subject: [PATCH] chore: use correct binding syntax

---
 .../examples/grid-tree-data-parent-child.component.html   | 4 ++--
 src/app/examples/grid-tree-data-parent-child.component.ts | 6 ++++--
 .../__tests__/angular-slickgrid.component.spec.ts         | 8 ++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/examples/grid-tree-data-parent-child.component.html b/src/app/examples/grid-tree-data-parent-child.component.html
index aa1f5f0c8..deaca5302 100644
--- a/src/app/examples/grid-tree-data-parent-child.component.html
+++ b/src/app/examples/grid-tree-data-parent-child.component.html
@@ -46,11 +46,11 @@ <h2>
       </button>
       <button (click)="reapplyToggledItems()" data-test="reapply-toggled-items-btn"
               class="btn btn-outline-secondary btn-sm"
-              disabled.bind="hasNoExpandCollapseChanged">
+              [disabled]="hasNoExpandCollapseChanged">
         <span class="mdi mdi-history"></span>
         <span>Reapply Previous Toggled Items</span>
       </button>
-      <div class.bind="loadingClass"></div>
+      <div [class]="loadingClass"></div>
     </div>
   </div>
 
diff --git a/src/app/examples/grid-tree-data-parent-child.component.ts b/src/app/examples/grid-tree-data-parent-child.component.ts
index 931f9c723..31151d3f0 100644
--- a/src/app/examples/grid-tree-data-parent-child.component.ts
+++ b/src/app/examples/grid-tree-data-parent-child.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 
 import {
@@ -49,7 +49,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
   hasNoExpandCollapseChanged = true;
   treeToggleItems: TreeToggledItem[] = [];
 
-  constructor() { }
+  constructor(private cdref: ChangeDetectorRef) { }
 
   ngOnInit(): void {
     // define the grid options & columns and then create the grid itself
@@ -313,12 +313,14 @@ export class GridTreeDataParentChildComponent implements OnInit {
   /** Whenever a parent is being toggled, we'll keep a reference of all of these changes so that we can reapply them whenever we want */
   handleOnTreeItemToggled(treeToggleExecution: TreeToggleStateChange) {
     this.hasNoExpandCollapseChanged = false;
+    this.cdref.detectChanges();
     this.treeToggleItems = treeToggleExecution.toggledItems as TreeToggledItem[];
     console.log('Tree Data changes', treeToggleExecution);
   }
 
   handleOnGridStateChanged(gridStateChange: GridStateChange) {
     this.hasNoExpandCollapseChanged = false;
+    this.cdref.detectChanges();
 
     if (gridStateChange?.change?.type === GridStateType.treeData) {
       console.log('Tree Data gridStateChange', gridStateChange?.gridState?.treeData);
diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
index 9adbf252c..ab7e528c6 100644
--- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
+++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
@@ -323,10 +323,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
       </div>
     </div>
   <angular-slickgrid
-    grid-id="grid1"
-    column-definitions.bind="columnDefinitions"
-    grid-options.bind="gridOptions"
-    dataset.bind="dataset">
+    gridId="grid1"
+    [columnDefinitions]="columnDefinitions"
+    [gridOptions]="gridOptions"
+    [dataset]="dataset">
   </angular-slickgrid>`;
 
   beforeEach(async () => {