| nested-node.ts (material2-7.3.4) | : | nested-node.ts (material2-7.3.5) |
|---|
| | |
| skipping to change at line 13 | | skipping to change at line 13 |
|---|
| * Copyright Google LLC All Rights Reserved. | | * Copyright Google LLC All Rights Reserved. |
| * | | * |
| * Use of this source code is governed by an MIT-style license that can be | | * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license | | * found in the LICENSE file at https://angular.io/license |
| */ | | */ |
| import { | | import { |
| AfterContentInit, | | AfterContentInit, |
| ContentChildren, | | ContentChildren, |
| Directive, | | Directive, |
| ElementRef, | | ElementRef, |
|
| IterableDiffers, | | |
| IterableDiffer, | | IterableDiffer, |
|
| | IterableDiffers, |
| OnDestroy, | | OnDestroy, |
| QueryList, | | QueryList, |
| } from '@angular/core'; | | } from '@angular/core'; |
| import {Observable} from 'rxjs'; | | import {Observable} from 'rxjs'; |
| import {takeUntil} from 'rxjs/operators'; | | import {takeUntil} from 'rxjs/operators'; |
| | |
|
| | import {CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet} from './outlet'; |
| import {CdkTree, CdkTreeNode} from './tree'; | | import {CdkTree, CdkTreeNode} from './tree'; |
|
| import {CdkTreeNodeOutlet} from './outlet'; | | |
| import {getTreeControlFunctionsMissingError} from './tree-errors'; | | import {getTreeControlFunctionsMissingError} from './tree-errors'; |
| | |
| /** | | /** |
| * Nested node is a child of `<cdk-tree>`. It works with nested tree. | | * Nested node is a child of `<cdk-tree>`. It works with nested tree. |
| * By using `cdk-nested-tree-node` component in tree node template, children of
the parent node will | | * By using `cdk-nested-tree-node` component in tree node template, children of
the parent node will |
| * be added in the `cdkTreeNodeOutlet` in tree node template. | | * be added in the `cdkTreeNodeOutlet` in tree node template. |
| * For example: | | * For example: |
| * ```html | | * ```html |
| * <cdk-nested-tree-node> | | * <cdk-nested-tree-node> |
| * {{node.name}} | | * {{node.name}} |
| | |
| skipping to change at line 54 | | skipping to change at line 54 |
|---|
| * ``` | | * ``` |
| */ | | */ |
| @Directive({ | | @Directive({ |
| selector: 'cdk-nested-tree-node', | | selector: 'cdk-nested-tree-node', |
| exportAs: 'cdkNestedTreeNode', | | exportAs: 'cdkNestedTreeNode', |
| host: { | | host: { |
| '[attr.aria-expanded]': 'isExpanded', | | '[attr.aria-expanded]': 'isExpanded', |
| '[attr.role]': 'role', | | '[attr.role]': 'role', |
| 'class': 'cdk-tree-node cdk-nested-tree-node', | | 'class': 'cdk-tree-node cdk-nested-tree-node', |
| }, | | }, |
|
| providers: [{provide: CdkTreeNode, useExisting: CdkNestedTreeNode}] | | providers: [ |
| | {provide: CdkTreeNode, useExisting: CdkNestedTreeNode}, |
| | {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode} |
| | ] |
| }) | | }) |
| export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
Init, OnDestroy { | | export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
Init, OnDestroy { |
| /** Differ used to find the changes in the data provided by the data source. *
/ | | /** Differ used to find the changes in the data provided by the data source. *
/ |
| private _dataDiffer: IterableDiffer<T>; | | private _dataDiffer: IterableDiffer<T>; |
| | |
| /** The children data dataNodes of current node. They will be placed in `CdkTr
eeNodeOutlet`. */ | | /** The children data dataNodes of current node. They will be placed in `CdkTr
eeNodeOutlet`. */ |
| protected _children: T[]; | | protected _children: T[]; |
| | |
| /** The children node placeholder. */ | | /** The children node placeholder. */ |
|
| @ContentChildren(CdkTreeNodeOutlet) nodeOutlet: QueryList<CdkTreeNodeOutlet>; | | @ContentChildren(CdkTreeNodeOutlet, { |
| | // We need to use `descendants: true`, because Ivy will no longer match |
| | // indirect descendants if it's left as false. |
| | descendants: true |
| | }) |
| | nodeOutlet: QueryList<CdkTreeNodeOutlet>; |
| | |
| constructor(protected _elementRef: ElementRef<HTMLElement>, | | constructor(protected _elementRef: ElementRef<HTMLElement>, |
| protected _tree: CdkTree<T>, | | protected _tree: CdkTree<T>, |
| protected _differs: IterableDiffers) { | | protected _differs: IterableDiffers) { |
| super(_elementRef, _tree); | | super(_elementRef, _tree); |
| } | | } |
| | |
| ngAfterContentInit() { | | ngAfterContentInit() { |
| this._dataDiffer = this._differs.find([]).create(this._tree.trackBy); | | this._dataDiffer = this._differs.find([]).create(this._tree.trackBy); |
| if (!this._tree.treeControl.getChildren) { | | if (!this._tree.treeControl.getChildren) { |
| | |
| skipping to change at line 95 | | skipping to change at line 103 |
|---|
| .subscribe(() => this.updateChildrenNodes()); | | .subscribe(() => this.updateChildrenNodes()); |
| } | | } |
| | |
| ngOnDestroy() { | | ngOnDestroy() { |
| this._clear(); | | this._clear(); |
| super.ngOnDestroy(); | | super.ngOnDestroy(); |
| } | | } |
| | |
| /** Add children dataNodes to the NodeOutlet */ | | /** Add children dataNodes to the NodeOutlet */ |
| protected updateChildrenNodes(children?: T[]): void { | | protected updateChildrenNodes(children?: T[]): void { |
|
| | const outlet = this._getNodeOutlet(); |
| if (children) { | | if (children) { |
| this._children = children; | | this._children = children; |
| } | | } |
|
| if (this.nodeOutlet.length && this._children) { | | if (outlet && this._children) { |
| const viewContainer = this.nodeOutlet.first.viewContainer; | | const viewContainer = outlet.viewContainer; |
| this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContain
er, this._data); | | this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContain
er, this._data); |
| } else { | | } else { |
| // Reset the data differ if there's no children nodes displayed | | // Reset the data differ if there's no children nodes displayed |
| this._dataDiffer.diff([]); | | this._dataDiffer.diff([]); |
| } | | } |
| } | | } |
| | |
| /** Clear the children dataNodes. */ | | /** Clear the children dataNodes. */ |
| protected _clear(): void { | | protected _clear(): void { |
|
| if (this.nodeOutlet && this.nodeOutlet.first) { | | const outlet = this._getNodeOutlet(); |
| this.nodeOutlet.first.viewContainer.clear(); | | if (outlet) { |
| | outlet.viewContainer.clear(); |
| this._dataDiffer.diff([]); | | this._dataDiffer.diff([]); |
| } | | } |
| } | | } |
|
| | |
| | /** Gets the outlet for the current node. */ |
| | private _getNodeOutlet() { |
| | const outlets = this.nodeOutlet; |
| | |
| | if (outlets) { |
| | // Note that since we use `descendants: true` on the query, we have to ens |
| | ure |
| | // that we don't pick up the outlet of a child node by accident. |
| | return outlets.find(outlet => !outlet._node || outlet._node === this); |
| | } |
| | } |
| } | | } |
| | | |
| End of changes. 10 change blocks. |
|---|
| 8 lines changed or deleted | | 30 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 