refactor(devtools): use signal apis in injection and router tree (angular#57047)

Refactor the injection and router tree components to use signal apis, in future we can make the components onPush and zoneless

PR Close angular#57047

Author: sheikalthaf

devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts

@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild} from '@angular/core';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  input,
+  OnDestroy,
+  viewChild,
+} from '@angular/core';
 import {SerializedInjector} from 'protocol';
 
 import {InjectorTreeNode, InjectorTreeVisualizer} from './injector-tree-visualizer';
@@ -29,17 +38,17 @@ import {InjectorTreeNode, InjectorTreeVisualizer} from './injector-tree-visualiz
   ],
   standalone: true,
 })
-export class ResolutionPathComponent implements OnDestroy, AfterViewInit {
-  @ViewChild('svgContainer', {static: true}) private svgContainer!: ElementRef;
-  @ViewChild('mainGroup', {static: true}) private g!: ElementRef;
+export class ResolutionPathComponent implements OnDestroy {
+  private svgContainer = viewChild.required<ElementRef>('svgContainer');
+  private g = viewChild.required<ElementRef>('mainGroup');
 
-  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
 
   private injectorTree!: InjectorTreeVisualizer;
-  private pathNode!: InjectorTreeNode;
 
-  @Input()
-  set path(path: SerializedInjector[]) {
+  readonly path = input<SerializedInjector[]>([]);
+  private readonly pathNode = computed(() => {
+    const path = this.path();
     const serializedInjectors = path.slice().reverse();
     const injectorTreeNodes: InjectorTreeNode[] = [];
 
@@ -57,30 +66,35 @@ export class ResolutionPathComponent implements OnDestroy, AfterViewInit {
       }
     }
 
-    this.pathNode = injectorTreeNodes[0];
-    this.injectorTree?.render?.(this.pathNode);
-  }
+    return injectorTreeNodes[0];
+  });
 
-  ngOnInit(): void {
-    this.injectorTree = new InjectorTreeVisualizer(
-      this.svgContainer.nativeElement,
-      this.g.nativeElement,
-      {
-        orientation: this.orientation,
-      },
-    );
+  constructor() {
+    afterNextRender({
+      read: () => {
+        this.injectorTree = new InjectorTreeVisualizer(
+          this.svgContainer().nativeElement,
+          this.g().nativeElement,
+          {
+            orientation: this.orientation(),
+          },
+        );
 
-    if (this.pathNode) {
-      this.injectorTree.render(this.pathNode);
-    }
+        if (this.pathNode()) {
+          this.injectorTree.render(this.pathNode());
+        }
+
+        this.injectorTree.onNodeClick((_, node) => {
+          this.injectorTree.snapToNode(node);
+        });
 
-    this.injectorTree.onNodeClick((_, node) => {
-      this.injectorTree.snapToNode(node);
+        this.injectorTree.snapToRoot(0.7);
+      },
     });
-  }
 
-  ngAfterViewInit(): void {
-    this.injectorTree.snapToRoot(0.7);
+    effect(() => {
+      this.injectorTree?.render?.(this.pathNode());
+    });
   }
 
   ngOnDestroy(): void {

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.html

@@ -1,22 +1,22 @@
 <div class="meta-data-container">
-  @if (viewEncapsulation) {
+  @if (viewEncapsulation()) {
     <a
       mat-button
       color="primary"
       href="https://angular.dev/api/core/ViewEncapsulation"
       target="_blank"
       >
-      View Encapsulation: <span class="meta-data">{{ viewEncapsulation }}</span>
+      View Encapsulation: <span class="meta-data">{{ viewEncapsulation() }}</span>
     </a>
   }
-  @if (changeDetectionStrategy) {
+  @if (changeDetectionStrategy()) {
     <a
       mat-button
       color="primary"
       href="https://angular.dev/api/core/ChangeDetectionStrategy"
       target="_blank"
       >
-      Change Detection Strategy: <span class="meta-data">{{ changeDetectionStrategy }}</span>
+      Change Detection Strategy: <span class="meta-data">{{ changeDetectionStrategy() }}</span>
     </a>
   }
 </div>

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts

@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
 import {ComponentType} from 'protocol';
 
-import {DirectivePropertyResolver} from '../property-resolver/directive-property-resolver';
 import {ElementPropertyResolver} from '../property-resolver/element-property-resolver';
 import {MatButton} from '@angular/material/button';
 
@@ -22,29 +21,30 @@ import {MatButton} from '@angular/material/button';
   imports: [MatButton],
 })
 export class ComponentMetadataComponent {
-  @Input({required: true}) currentSelectedComponent!: ComponentType;
+  readonly currentSelectedComponent = input.required<ComponentType>();
 
-  constructor(private _nestedProps: ElementPropertyResolver) {}
+  private _nestedProps = inject(ElementPropertyResolver);
 
   viewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom'];
 
-  get controller(): DirectivePropertyResolver | undefined {
-    if (!this.currentSelectedComponent) {
+  readonly controller = computed(() => {
+    const comp = this.currentSelectedComponent();
+    if (!comp) {
       return;
     }
-    return this._nestedProps.getDirectiveController(this.currentSelectedComponent.name);
-  }
+    return this._nestedProps.getDirectiveController(comp.name);
+  });
 
-  get viewEncapsulation(): string | undefined {
-    const encapsulationIndex = this?.controller?.directiveViewEncapsulation;
+  readonly viewEncapsulation = computed(() => {
+    const encapsulationIndex = this.controller()?.directiveViewEncapsulation;
     if (encapsulationIndex !== undefined) {
       return this.viewEncapsulationModes[encapsulationIndex];
     }
     return undefined;
-  }
+  });
 
-  get changeDetectionStrategy(): string | undefined {
-    const onPush = this?.controller?.directiveHasOnPushStrategy;
+  readonly changeDetectionStrategy = computed(() => {
+    const onPush = this.controller()?.directiveHasOnPushStrategy;
     return onPush ? 'OnPush' : onPush !== undefined ? 'Default' : undefined;
-  }
+  });
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html

@@ -1,22 +1,23 @@
-@if (currentSelectedElement) {
-  @if (currentSelectedElement.component) {
+@if (currentSelectedElement()) {
+  @let comp = currentSelectedElement().component;
+  @if (comp) {
     <mat-accordion class="property-tab-header">
       <div>
         <mat-expansion-panel [hideToggle]="true">
           <mat-expansion-panel-header collapsedHeight="32px" expandedHeight="32px">
             <mat-panel-title>
               <div class="element-header">
-                <div class="component-name">{{ currentSelectedElement.component.name }}</div>
+                <div class="component-name">{{ comp.name }}</div>
               </div>
             </mat-panel-title>
           </mat-expansion-panel-header>
-          <ng-component-metadata [currentSelectedComponent]="currentSelectedElement.component"></ng-component-metadata>
+          <ng-component-metadata [currentSelectedComponent]="comp"></ng-component-metadata>
         </mat-expansion-panel>
       </div>
     </mat-accordion>
   } @else {
     <div class="element-header">
-      <div class="element-name">{{ currentSelectedElement.element }}</div>
+      <div class="element-name">{{ currentSelectedElement().element }}</div>
     </div>
   }
 } @else {

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
 
 import {IndexedNode} from '../directive-forest/index-forest';
 import {ComponentMetadataComponent} from './component-metadata.component';
@@ -21,6 +21,5 @@ import {MatExpansionModule} from '@angular/material/expansion';
   imports: [MatExpansionModule, ComponentMetadataComponent],
 })
 export class PropertyTabHeaderComponent {
-  @Input({required: true}) currentSelectedElement!: IndexedNode;
-  @Input() currentDirectives: string[] | undefined;
+  currentSelectedElement = input.required<IndexedNode>();
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html

@@ -1,4 +1,4 @@
-<ng-property-tab-header [currentSelectedElement]="currentSelectedElement">
+<ng-property-tab-header [currentSelectedElement]="currentSelectedElement()">
 </ng-property-tab-header>
-<ng-property-tab-body (inspect)="inspect.emit($event)" (viewSource)="viewSource.emit($event)" [currentSelectedElement]="currentSelectedElement">
+<ng-property-tab-body (inspect)="inspect.emit($event)" (viewSource)="viewSource.emit($event)" [currentSelectedElement]="currentSelectedElement()">
 </ng-property-tab-body>

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, input, output} from '@angular/core';
 import {DirectivePosition} from 'protocol';
 
 import {IndexedNode} from '../directive-forest/index-forest';
@@ -21,7 +21,7 @@ import {PropertyTabHeaderComponent} from './property-tab-header.component';
   imports: [PropertyTabHeaderComponent, PropertyTabBodyComponent],
 })
 export class PropertyTabComponent {
-  @Input({required: true}) currentSelectedElement!: IndexedNode;
-  @Output() viewSource = new EventEmitter<string>();
-  @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>();
+  readonly currentSelectedElement = input.required<IndexedNode>();
+  readonly viewSource = output<string>();
+  readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, computed, inject, Input, signal} from '@angular/core';
+import {Component, computed, inject, input, signal} from '@angular/core';
 import {MatOption} from '@angular/material/core';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatIcon} from '@angular/material/icon';
@@ -19,8 +19,8 @@ import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from '
 @Component({
   selector: 'ng-injector-providers',
   template: `
-    <h1>Providers for {{ injector?.name }}</h1>
-    @if (injector) {
+    <h1>Providers for {{ injector()?.name }}</h1>
+    @if (injector()) {
     <div class="injector-providers">
       <mat-form-field appearance="fill" class="form-field-spacer">
         <mat-label>Search by token</mat-label>
@@ -42,8 +42,8 @@ import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from '
           }
         </mat-select>
       </mat-form-field>
-      @if (providers.length > 0) {
-      <table mat-table [dataSource]="providers" class="mat-elevation-z4">
+      @if (visibleProviders().length > 0) {
+      <table mat-table [dataSource]="visibleProviders()" class="mat-elevation-z4">
         <ng-container matColumnDef="token">
           <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Token</h3></th>
           <td mat-cell *matCellDef="let provider">{{ provider.token }}</td>
@@ -155,12 +155,12 @@ import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from '
   ],
 })
 export class InjectorProvidersComponent {
-  @Input({required: true}) injector!: SerializedInjector;
-  @Input() providers: SerializedProviderRecord[] = [];
+  readonly injector = input.required<SerializedInjector>();
+  readonly providers = input<SerializedProviderRecord[]>([]);
 
-  searchToken = signal('');
-  searchType = signal('');
-  visibleProviders = computed(() => {
+  readonly searchToken = signal('');
+  readonly searchType = signal('');
+  readonly visibleProviders = computed(() => {
     const searchToken = this.searchToken().toLowerCase();
     const searchType = this.searchType();
 
@@ -169,7 +169,7 @@ export class InjectorProvidersComponent {
       predicates.push((provider) => provider.token.toLowerCase().includes(searchToken));
     searchType && predicates.push((provider) => provider.type === searchType);
 
-    return this.providers.filter((provider) =>
+    return this.providers().filter((provider) =>
       predicates.every((predicate) => predicate(provider)),
     );
   });
@@ -184,21 +184,15 @@ export class InjectorProvidersComponent {
 
   providerTypes = Object.keys(this.providerTypeToLabel);
 
-  messageBus = inject(MessageBus<Events>);
+  messageBus = inject<MessageBus<Events>>(MessageBus);
 
   select(row: SerializedProviderRecord) {
-    this.messageBus.emit('logProvider', [
-      {
-        id: this.injector.id,
-        type: this.injector.type,
-        name: this.injector.name,
-      },
-      row,
-    ]);
+    const {id, type, name} = this.injector();
+    this.messageBus.emit('logProvider', [{id, type, name}, row]);
   }
 
   get displayedColumns(): string[] {
-    if (this.injector?.type === 'element') {
+    if (this.injector()?.type === 'element') {
       return ['token', 'type', 'isViewProvider', 'log'];
     }
     return ['token', 'type', 'log'];

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html

@@ -1,9 +1,9 @@
-@if (!diDebugAPIsAvailable) {
+@if (!diDebugAPIsAvailable()) {
   <p class="not-supported">
     This feature is only available on version 17.0.0 or higher of Angular.
   </p>
 }
-<as-split [class.hidden]="!diDebugAPIsAvailable" unit="pixel" direction="vertical" [gutterSize]="9" [disabled]="true">
+<as-split [class.hidden]="!diDebugAPIsAvailable()" unit="pixel" direction="vertical" [gutterSize]="9" [disabled]="true">
   <as-split-area size="50">
     <mat-checkbox
       (change)="toggleHideInjectorsWithNoProviders()"
@@ -52,9 +52,9 @@ <h2>
           </as-split-area>
         </as-split>
       </as-split-area>
-      @if (selectedNode && providers.length > 0) {
+      @if (selectedNode() && providers().length > 0) {
         <as-split-area size="40" minSize="25">
-          <ng-injector-providers [injector]="selectedNode.data.injector" [providers]="providers"/>
+          <ng-injector-providers [injector]="selectedNode()!.data.injector" [providers]="providers()"/>
         </as-split-area>
       }
     </as-split>