Merge pull request #942 from ghiscoding/chore/bindable

chore: use correct binding syntax

Author: ghiscoding

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>
 

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);

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 () => {