refactor(columns): deprecate children and replace with childColumns (#14489)

Author: damyanpetev

CHANGELOG.md

@@ -10,6 +10,11 @@ All notable changes for each version of this project will be documented in this
     - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
     - Added keyboard interactions for row dimension collapse using `Alt + Arrows` and row headers sorting using `Ctrl + Arrow Up/Down`.
 
+### General
+- `ColumnType`, `IgxColumn`, `IgxColumnGroup`, `IgxColumnLayout`
+    - The `children` query property has been deprecated and replaced by `childColumns` getter directly returning columns array.
+
+
 ## 18.0.0
 ### New Features
 - `IgxCombo`, `IgxSimpleCombo`:
@@ -173,7 +178,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`,`IgxSimpleCombo`
     - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array).
 
-=======
+
 ## 16.1.5
 ### General
 - `IgxButtonGroup`:

projects/igniteui-angular/migrations/update-18_1_0/changes/members.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "children.toArray()",
+            "replaceWith": "childColumns",
+            "definedIn": [
+                "ColumnType",
+                "IgxColumnComponent",
+                "IgxColumnGroupComponent",
+                "IgxColumnLayoutComponent"
+            ]
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-18_1_0/index.spec.ts

@@ -120,4 +120,46 @@ describe(`Update to ${version}`, () => {
         );
     });
 
+    it('Should replace deprecated `children` property of Columns', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create(
+            '/testSrc/appPrefix/component/expansion-test.component.ts',
+            `import { Component } from '@angular/core';
+import { IgxColumnGroupComponent, ColumnType } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-columns-test',
+    templateUrl: './columns-test.component.html',
+    styleUrls: ['./columns-test.component.scss']
+})
+export class ColumnsTestComponent {
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.children.toArray();
+    }
+    public toggleColumnGroup2(columnGroup: ColumnType) {
+        const columns = columnGroup.children.toArray();
+    }
+}`
+        );
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        const expectedContent =  `import { Component } from '@angular/core';
+import { IgxColumnGroupComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-columns-test',
+    templateUrl: './columns-test.component.html',
+    styleUrls: ['./columns-test.component.scss']
+})
+export class ColumnsTestComponent {
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.childColumns;
+    }
+    public toggleColumnGroup2(columnGroup: ColumnType) {
+        const columns = columnGroup.childColumns;
+    }
+}`;
+        expect(
+                tree.readContent('/testSrc/appPrefix/component/expansion-test.component.ts')
+            ).toEqual(expectedContent);
+    });
 });

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -13,7 +13,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { IgxColumnComponent } from './column.component';
 import { flatten } from '../../core/utils';
-import { CellType, IgxColumnTemplateContext } from '../common/grid.interface';
+import { CellType, ColumnType, IgxColumnTemplateContext } from '../common/grid.interface';
 
 
 @Component({
@@ -25,7 +25,10 @@ import { CellType, IgxColumnTemplateContext } from '../common/grid.interface';
 })
 export class IgxColumnGroupComponent extends IgxColumnComponent implements AfterContentInit {
 
-    @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent })
+    /**
+     * @deprecated in version 18.1.0. Use the `childColumns` property instead.
+     */
+    @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent,  })
     public override children = new QueryList<IgxColumnComponent>();
 
     /**
@@ -311,6 +314,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
 
     }
 
+    /**
+     * A list containing all the child columns under this column (if any).
+     * Empty without children or if this column is not Group or Layout.
+     */
+    public override get childColumns(): ColumnType[] {
+        return this.children.toArray();
+    }
+
     /** @hidden @internal **/
     public override get allChildren(): IgxColumnComponent[] {
         return flatten(this.children.toArray());

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1459,6 +1459,14 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this.parent && this.parent.columnLayout;
     }
 
+    /**
+     * A list containing all the child columns under this column (if any).
+     * Empty without children or if this column is not Group or Layout.
+     */
+    public get childColumns(): ColumnType[] {
+        return [];
+    }
+
     /** @hidden @internal **/
     public get allChildren(): IgxColumnComponent[] {
         return [];
@@ -1638,11 +1646,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * ```typescript
      * let columnChildren = this.column.children;
      * ```
-     * ```typescript
-     * this.column.children = childrenColumns;
-     * ```
      *
-     * @memberof IgxColumnComponent
+     * @deprecated in version 18.1.0. Use the `childColumns` property instead.
      */
     public children: QueryList<IgxColumnComponent>;
     /**

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -299,9 +299,17 @@ export interface FieldType {
 export interface ColumnType extends FieldType {
     /** Represents the instance of the parent `GridType` that contains this column. */
     grid: GridType;
-    /** A list, containing all the child columns under this column (if any). */
+    /**
+     * A list containing all the child columns under this column (if any).
+     * @deprecated in version 18.1.0. Use the `childColumns` property instead.
+     */
     children: QueryList<ColumnType>;
-    /** An array, containing all the child columns, including nested children. */
+    /**
+     * A list containing all the child columns under this column (if any).
+     * Empty without children or if this column is not Group or Layout.
+     */
+    get childColumns(): ColumnType[];
+    /** @hidden @internal */
     allChildren: ColumnType[];
     /**
      * The header group component associated with this column.

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -765,12 +765,12 @@ describe('IgxGrid - multi-column headers #grid', () => {
         it('column hiding - child level', () => {
             const addressGroup = fixture.componentInstance.addrInfoColGroup;
 
-            addressGroup.children.first.hidden = true;
+            addressGroup.childColumns[0].hidden = true;
             fixture.detectChanges();
 
             expect(GridFunctions.getColumnGroupHeaders(fixture).length).toEqual(5);
-            expect(addressGroup.children.first.hidden).toBe(true);
-            expect(addressGroup.children.first.children.toArray().every(c => c.hidden === true)).toEqual(true);
+            expect(addressGroup.childColumns[0].hidden).toBe(true);
+            expect(addressGroup.childColumns[0].childColumns.every(c => c.hidden === true)).toEqual(true);
         });
 
         it('column hiding - Verify column hiding of Individual column and Child column', () => {
@@ -935,17 +935,17 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
 
             // Get children of grouped column
-            expect(getColGroup(grid, 'General Information').children.length).toEqual(2);
+            expect(getColGroup(grid, 'General Information').childColumns.length).toEqual(2);
 
             // Get children of hidden group
-            expect(getColGroup(grid, 'Person Details').children.length).toEqual(2);
+            expect(getColGroup(grid, 'Person Details').childColumns.length).toEqual(2);
 
             // Get children of group with one column
-            const postCodeGroupedColumnAllChildren = getColGroup(grid, 'Postal Code').children;
+            const postCodeGroupedColumnAllChildren = getColGroup(grid, 'Postal Code').childColumns;
             expect(postCodeGroupedColumnAllChildren.length).toEqual(1);
 
             // Get children of group with more levels
-            const addressGroupedColumnAllChildren = getColGroup(grid, 'Address Information').children;
+            const addressGroupedColumnAllChildren = getColGroup(grid, 'Address Information').childColumns;
             expect(addressGroupedColumnAllChildren.length).toEqual(3);
         });
 

src/app/grid-column-groups/grid-column-groups.sample.ts

@@ -96,7 +96,7 @@ export class GridColumnGroupsSampleComponent {
     }
 
     public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
-        const columns = columnGroup.children.toArray();
+        const columns = columnGroup.childColumns;
 
         if (columnGroup.header === 'General Information') {
             const col = columns[1];