diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts index 6d3244856aa..e99336d8fe4 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts @@ -84,9 +84,9 @@ export class ComponentDataSource extends DataSource { return this._nodeToFlat.get(indexedNode); } - update(forest: DevToolsNode[]): FlatNode[] { + update(forest: DevToolsNode[]): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } { if (!forest) { - return; + return { newItems: [], movedItems: [], removedItems: [] }; } const indexedForest = indexForest(forest); @@ -101,7 +101,7 @@ export class ComponentDataSource extends DataSource { movedItems.forEach(i => this._nodeToFlat.set(i.original, i)); newItems.forEach(i => (i.newItem = true)); - return newItems; + return { newItems, movedItems, removedItems }; } connect(collectionViewer: CollectionViewer): Observable { diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts index 3ede52f13a5..7ef3894ca6d 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts @@ -25,9 +25,9 @@ import { arrayEquals } from 'shared-utils'; }) export class DirectiveForestComponent { @Input() set forest(forest: DevToolsNode[]) { - this._updateForest(forest); - - if (this.currentSelectedElement) { + const result = this._updateForest(forest); + const changed = result.movedItems.length || result.newItems.length || result.removedItems.length; + if (this.currentSelectedElement && changed) { this._reselectNodeOnUpdate(); } } @@ -103,18 +103,21 @@ export class DirectiveForestComponent { } } - private _updateForest(forest: DevToolsNode[]): void { - const newItems = this.dataSource.update(forest); + private _updateForest( + forest: DevToolsNode[] + ): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } { + const result = this.dataSource.update(forest); if (!this._initialized && forest && forest.length) { this.treeControl.expandAll(); this._initialized = true; - newItems.forEach(item => (item.newItem = false)); + result.newItems.forEach(item => (item.newItem = false)); } - if (newItems && newItems.length) { - newItems.forEach(item => { + if (result.newItems && result.newItems.length) { + result.newItems.forEach(item => { this.treeControl.expand(item); }); } + return result; } populateParents(position: ElementPosition): void {