fix(cdk/tree): add missing generic types to trackBy Fixes (#21364) (#…

…21421)

* fix(cdk/tree): add missing generic types to trackBy Fixes (#21364)

* fix(cdk/tree): add missing generic types to trackBy Fixes (#21364)

(cherry picked from commit 22d5600)

.gitignore

@@ -25,6 +25,7 @@ node_modules
 /.idea
 /.vscode/launch.json
 /*.iml
+/.vs
 
 # misc
 .DS_Store

src/cdk/tree/nested-node.ts

@@ -39,9 +39,8 @@ import {getTreeControlFunctionsMissingError} from './tree-errors';
     {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode}
   ]
 })
-export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, DoCheck,
-  OnDestroy,
-  OnInit {
+export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K>
+    implements AfterContentInit, DoCheck, OnDestroy, OnInit {
   /** Differ used to find the changes in the data provided by the data source. */
   private _dataDiffer: IterableDiffer<T>;
 
@@ -57,7 +56,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
   nodeOutlet: QueryList<CdkTreeNodeOutlet>;
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
-              protected _tree: CdkTree<T>,
+              protected _tree: CdkTree<T, K>,
               protected _differs: IterableDiffers) {
     super(_elementRef, _tree);
     // The classes are directly added here instead of in the host property because classes on

src/cdk/tree/padding.ts

@@ -23,7 +23,7 @@ const cssUnitPattern = /([A-Za-z%]+)$/;
 @Directive({
   selector: '[cdkTreeNodePadding]',
 })
-export class CdkTreeNodePadding<T> implements OnDestroy {
+export class CdkTreeNodePadding<T, K = T> implements OnDestroy {
   /** Current padding value applied to the element. Used to avoid unnecessarily hitting the DOM. */
   private _currentPadding: string|null;
 
@@ -48,8 +48,8 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
   set indent(indent: number | string) { this._setIndentInput(indent); }
   _indent: number = 40;
 
-  constructor(private _treeNode: CdkTreeNode<T>,
-              private _tree: CdkTree<T>,
+  constructor(private _treeNode: CdkTreeNode<T, K>,
+              private _tree: CdkTree<T, K>,
               private _element: ElementRef<HTMLElement>,
               @Optional() private _dir: Directionality) {
     this._setPadding();

src/cdk/tree/toggle.ts

@@ -15,15 +15,15 @@ import {CdkTree, CdkTreeNode} from './tree';
  * Node toggle to expand/collapse the node.
  */
 @Directive({selector: '[cdkTreeNodeToggle]'})
-export class CdkTreeNodeToggle<T> {
+export class CdkTreeNodeToggle<T, K = T> {
   /** Whether expand/collapse the node recursively. */
   @Input('cdkTreeNodeToggleRecursive')
   get recursive(): boolean { return this._recursive; }
   set recursive(value: boolean) { this._recursive = coerceBooleanProperty(value); }
   protected _recursive = false;
 
-  constructor(protected _tree: CdkTree<T>,
-              protected _treeNode: CdkTreeNode<T>) {}
+  constructor(protected _tree: CdkTree<T, K>,
+              protected _treeNode: CdkTreeNode<T, K>) {}
 
   // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
   // In Ivy the `host` bindings will be merged when this class is extended, whereas in

src/cdk/tree/tree.ts

@@ -69,7 +69,7 @@ import {coerceNumberProperty} from '@angular/cdk/coercion';
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
 
@@ -100,7 +100,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
   private _dataSource: DataSource<T> | Observable<T[]> | T[];
 
   /** The tree controller */
-  @Input() treeControl: TreeControl<T>;
+  @Input() treeControl: TreeControl<T, K>;
 
   /**
    * Tracking function that will be used to check the differences in data changes. Used similarly
@@ -303,7 +303,7 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
   selector: 'cdk-tree-node',
   exportAs: 'cdkTreeNode',
 })
-export class CdkTreeNode<T> implements DoCheck, FocusableOption, OnDestroy, OnInit {
+export class CdkTreeNode<T, K = T> implements DoCheck, FocusableOption, OnDestroy, OnInit {
   /**
    * The role of the tree node.
    * @deprecated The correct role is 'treeitem', 'group' should not be used. This input will be
@@ -362,8 +362,8 @@ export class CdkTreeNode<T> implements DoCheck, FocusableOption, OnDestroy, OnIn
    }
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
-              protected _tree: CdkTree<T>) {
-    CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
+              protected _tree: CdkTree<T, K>) {
+    CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T, K>;
     // The classes are directly added here instead of in the host property because classes on
     // the host property are not inherited with View Engine. It is not set as a @HostBinding because
     // it is not set by the time it's children nodes try to read the class from it.

src/material/tree/node.ts

@@ -45,12 +45,12 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
   inputs: ['role', 'disabled', 'tabIndex'],
   providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
 })
-export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
+export class MatTreeNode<T, K = T> extends _MatTreeNodeMixinBase<T, K>
     implements CanDisable, DoCheck, HasTabIndex, OnInit, OnDestroy {
 
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
-              protected _tree: CdkTree<T>,
+              protected _tree: CdkTree<T, K>,
               @Attribute('tabindex') tabIndex: string) {
     super(_elementRef, _tree);
 
@@ -107,8 +107,8 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
     {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode}
   ]
 })
-export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterContentInit, DoCheck,
-  OnDestroy, OnInit {
+export class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K>
+    implements AfterContentInit, DoCheck, OnDestroy, OnInit {
   @Input('matNestedTreeNode') node: T;
 
   /** Whether the node is disabled. */
@@ -127,7 +127,7 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
   private _tabIndex: number;
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
-              protected _tree: CdkTree<T>,
+              protected _tree: CdkTree<T, K>,
               protected _differs: IterableDiffers,
               @Attribute('tabindex') tabIndex: string) {
     super(_elementRef, _tree, _differs);

src/material/tree/padding.ts

@@ -15,7 +15,7 @@ import {Directive, Input} from '@angular/core';
   selector: '[matTreeNodePadding]',
   providers: [{provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding}]
 })
-export class MatTreeNodePadding<T> extends CdkTreeNodePadding<T> {
+export class MatTreeNodePadding<T, K = T> extends CdkTreeNodePadding<T, K> {
 
   /** The level of depth of the tree node. The padding will be `level * indent` pixels. */
   @Input('matTreeNodePadding')

src/material/tree/toggle.ts

@@ -18,7 +18,7 @@ import {Directive, Input} from '@angular/core';
   providers: [{provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle}]
 })
 // tslint:disable-next-line: coercion-types
-export class MatTreeNodeToggle<T> extends CdkTreeNodeToggle<T> {
+export class MatTreeNodeToggle<T, K = T> extends CdkTreeNodeToggle<T, K> {
   @Input('matTreeNodeToggleRecursive')
   get recursive(): boolean { return this._recursive; }
   set recursive(value: boolean) {

src/material/tree/tree.ts

@@ -40,7 +40,7 @@ import {MatTreeNodeOutlet} from './outlet';
   changeDetection: ChangeDetectionStrategy.Default,
   providers: [{provide: CdkTree, useExisting: MatTree}]
 })
-export class MatTree<T> extends CdkTree<T> {
+export class MatTree<T, K = T> extends CdkTree<T, K> {
   // Outlets within the tree's template where the dataNodes will be inserted.
   @ViewChild(MatTreeNodeOutlet, {static: true}) _nodeOutlet: MatTreeNodeOutlet;
 }

tools/public_api_guard/cdk/tree.d.ts

@@ -20,30 +20,30 @@ export declare abstract class BaseTreeControl<T, K = T> implements TreeControl<T
 
 export declare const CDK_TREE_NODE_OUTLET_NODE: InjectionToken<{}>;
 
-export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, DoCheck, OnDestroy, OnInit {
+export declare class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements AfterContentInit, DoCheck, OnDestroy, OnInit {
     protected _children: T[];
     protected _differs: IterableDiffers;
     protected _elementRef: ElementRef<HTMLElement>;
-    protected _tree: CdkTree<T>;
+    protected _tree: CdkTree<T, K>;
     nodeOutlet: QueryList<CdkTreeNodeOutlet>;
-    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>, _differs: IterableDiffers);
+    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T, K>, _differs: IterableDiffers);
     protected _clear(): void;
     ngAfterContentInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
     protected updateChildrenNodes(children?: T[]): void;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkNestedTreeNode<any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], { "role": "role"; "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, ["nodeOutlet"]>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkNestedTreeNode<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkNestedTreeNode<any, any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], { "role": "role"; "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, ["nodeOutlet"]>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkNestedTreeNode<any, any>, never>;
 }
 
-export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+export declare class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
     _nodeOutlet: CdkTreeNodeOutlet;
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
     trackBy: TrackByFunction<T>;
-    treeControl: TreeControl<T>;
+    treeControl: TreeControl<T, K>;
     viewChange: BehaviorSubject<{
         start: number;
         end: number;
@@ -55,37 +55,37 @@ export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer
     ngOnDestroy(): void;
     ngOnInit(): void;
     renderNodeChanges(data: T[] | ReadonlyArray<T>, dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTree<any>, "cdk-tree", ["cdkTree"], { "dataSource": "dataSource"; "treeControl": "treeControl"; "trackBy": "trackBy"; }, {}, ["_nodeDefs"], never>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkTree<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTree<any, any>, "cdk-tree", ["cdkTree"], { "dataSource": "dataSource"; "treeControl": "treeControl"; "trackBy": "trackBy"; }, {}, ["_nodeDefs"], never>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkTree<any, any>, never>;
 }
 
 export declare class CdkTreeModule {
     static ɵinj: i0.ɵɵInjectorDef<CdkTreeModule>;
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<CdkTreeModule, [typeof i1.CdkNestedTreeNode, typeof i2.CdkTreeNodeDef, typeof i3.CdkTreeNodePadding, typeof i4.CdkTreeNodeToggle, typeof i5.CdkTree, typeof i5.CdkTreeNode, typeof i6.CdkTreeNodeOutlet], never, [typeof i1.CdkNestedTreeNode, typeof i2.CdkTreeNodeDef, typeof i3.CdkTreeNodePadding, typeof i4.CdkTreeNodeToggle, typeof i5.CdkTree, typeof i5.CdkTreeNode, typeof i6.CdkTreeNodeOutlet]>;
 }
 
-export declare class CdkTreeNode<T> implements DoCheck, FocusableOption, OnDestroy, OnInit {
+export declare class CdkTreeNode<T, K = T> implements DoCheck, FocusableOption, OnDestroy, OnInit {
     protected _data: T;
     _dataChanges: Subject<void>;
     protected _destroyed: Subject<void>;
     protected _elementRef: ElementRef<HTMLElement>;
     protected _isAriaExpanded: boolean;
-    protected _tree: CdkTree<T>;
+    protected _tree: CdkTree<T, K>;
     get data(): T;
     set data(value: T);
     get isExpanded(): boolean;
     get level(): number;
     get role(): 'treeitem' | 'group';
     set role(_role: 'treeitem' | 'group');
-    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>);
+    constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T, K>);
     protected _setRoleFromData(): void;
     focus(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
     static mostRecentTreeNode: CdkTreeNode<any> | null;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNode<any>, "cdk-tree-node", ["cdkTreeNode"], { "role": "role"; }, {}, never>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNode<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNode<any, any>, "cdk-tree-node", ["cdkTreeNode"], { "role": "role"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNode<any, any>, never>;
 }
 
 export declare class CdkTreeNodeDef<T> {
@@ -112,36 +112,36 @@ export declare class CdkTreeNodeOutletContext<T> {
     constructor(data: T);
 }
 
-export declare class CdkTreeNodePadding<T> implements OnDestroy {
+export declare class CdkTreeNodePadding<T, K = T> implements OnDestroy {
     _indent: number;
     _level: number;
     get indent(): number | string;
     set indent(indent: number | string);
     indentUnits: string;
     get level(): number;
     set level(value: number);
-    constructor(_treeNode: CdkTreeNode<T>, _tree: CdkTree<T>, _element: ElementRef<HTMLElement>, _dir: Directionality);
+    constructor(_treeNode: CdkTreeNode<T, K>, _tree: CdkTree<T, K>, _element: ElementRef<HTMLElement>, _dir: Directionality);
     _paddingIndent(): string | null;
     protected _setIndentInput(indent: number | string): void;
     protected _setLevelInput(value: number): void;
     _setPadding(forceChange?: boolean): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_level: NumberInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNodePadding<any>, "[cdkTreeNodePadding]", never, { "level": "cdkTreeNodePadding"; "indent": "cdkTreeNodePaddingIndent"; }, {}, never>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNodePadding<any>, [null, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNodePadding<any, any>, "[cdkTreeNodePadding]", never, { "level": "cdkTreeNodePadding"; "indent": "cdkTreeNodePaddingIndent"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNodePadding<any, any>, [null, null, null, { optional: true; }]>;
 }
 
-export declare class CdkTreeNodeToggle<T> {
+export declare class CdkTreeNodeToggle<T, K = T> {
     protected _recursive: boolean;
-    protected _tree: CdkTree<T>;
-    protected _treeNode: CdkTreeNode<T>;
+    protected _tree: CdkTree<T, K>;
+    protected _treeNode: CdkTreeNode<T, K>;
     get recursive(): boolean;
     set recursive(value: boolean);
-    constructor(_tree: CdkTree<T>, _treeNode: CdkTreeNode<T>);
+    constructor(_tree: CdkTree<T, K>, _treeNode: CdkTreeNode<T, K>);
     _toggle(event: Event): void;
     static ngAcceptInputType_recursive: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNodeToggle<any>, "[cdkTreeNodeToggle]", never, { "recursive": "cdkTreeNodeToggleRecursive"; }, {}, never>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNodeToggle<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkTreeNodeToggle<any, any>, "[cdkTreeNodeToggle]", never, { "recursive": "cdkTreeNodeToggleRecursive"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkTreeNodeToggle<any, any>, never>;
 }
 
 export declare class FlatTreeControl<T, K = T> extends BaseTreeControl<T, K> {