Create a new pull request by comparing changes across two branches

devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts

@@ -26,8 +26,8 @@ import {ZippyComponent} from './zippy.component';
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DemoAppComponent {
-  @ViewChild(ZippyComponent) zippy: ZippyComponent;
-  @ViewChild('elementReference') elementRef: ElementRef;
+  @ViewChild(ZippyComponent) zippy!: ZippyComponent;
+  @ViewChild('elementReference') elementRef!: ElementRef;
 
   @Input('input_one') inputOne = 'input one';
   @Input() inputTwo = 'input two';

devtools/projects/demo-standalone/src/app/demo-app/heavy.component.ts

@@ -8,7 +8,7 @@
 
 import {Component, Input} from '@angular/core';
 
-const fib = (n: number) => {
+const fib = (n: number): number => {
   if (n === 1 || n === 2) {
     return 1;
   }

devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts

@@ -21,7 +21,7 @@ export interface DialogData {
 @Component({
   selector: 'app-dialog',
   standalone: true,
-  imports: [MatDialogModule, MatFormFieldModule, FormsModule, CommonModule],
+  imports: [MatDialogModule, MatFormFieldModule, FormsModule],
   template: `
     <h1 mat-dialog-title>Hi {{ data.name }}</h1>
     <div mat-dialog-content>

devtools/projects/demo-standalone/src/app/demo-app/todo/home/todo.component.ts

@@ -21,7 +21,7 @@ export interface Todo {
   selector: 'app-todo',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TooltipDirective],
+  imports: [TooltipDirective],
   styles: [`
       .destroy {
         cursor: pointer;
@@ -45,7 +45,7 @@ export interface Todo {
   `
 })
 export class TodoComponent {
-  @Input() todo: Todo;
+  @Input() todo!: Todo;
   @Output() update = new EventEmitter();
   @Output() delete = new EventEmitter();
 

devtools/projects/demo-standalone/src/app/demo-app/todo/home/todos.component.ts

@@ -38,7 +38,7 @@ export class TodosFilter implements PipeTransform {
   }
 }
 
-const fib = (n: number) => {
+const fib = (n: number): number => {
   if (n === 1 || n === 2) {
     return 1;
   }
@@ -47,15 +47,13 @@ const fib = (n: number) => {
 
 @Component({
   selector: 'app-todos',
-  imports: [NgForOf, RouterLink, TodoComponent, SamplePipe, TodosFilter, TooltipDirective],
+  imports: [RouterLink, TodoComponent, SamplePipe, TodosFilter, TooltipDirective],
   standalone: true,
   template: `
     <a [routerLink]="">Home</a>
     <a [routerLink]="">Home</a>
     <a [routerLink]="">Home</a>
-
     <p>{{ 'Sample text processed by a pipe' | sample }}</p>
-
     <section class="todoapp">
       <header class="header">
         <h1>todos</h1>
@@ -65,13 +63,14 @@ const fib = (n: number) => {
         <input id="toggle-all" class="toggle-all" type="checkbox" />
         <label for="toggle-all">Mark all as complete</label>
         <ul class="todo-list">
-          <app-todo
-            appTooltip
-            *ngFor="let todo of todos | todosFilter: filterValue"
-            [todo]="todo"
-            (delete)="onDelete($event)"
-            (update)="onChange($event)"
-          ></app-todo>
+          @for (todo of todos | todosFilter: filterValue; track todo) {
+            <app-todo
+              appTooltip
+              [todo]="todo"
+              (delete)="onDelete($event)"
+              (update)="onChange($event)"
+            />
+          }
         </ul>
       </section>
       <footer class="footer">
@@ -81,7 +80,7 @@ const fib = (n: number) => {
         <button class="clear-completed" (click)="clearCompleted()">Clear completed</button>
       </footer>
     </section>
-  `
+    `
 })
 export class TodosComponent implements OnInit, OnDestroy {
   todos: Todo[] = [
@@ -101,7 +100,7 @@ export class TodosComponent implements OnInit, OnDestroy {
   @Output() delete = new EventEmitter();
   @Output() add = new EventEmitter();
 
-  private hashListener: EventListenerOrEventListenerObject;
+  private hashListener!: EventListenerOrEventListenerObject;
 
   constructor(private cdRef: ChangeDetectorRef) {}
 

devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts

@@ -19,10 +19,8 @@ import {DialogComponent} from './dialog.component';
 @Component({
   selector: 'app-todo-demo',
   standalone: true,
-  imports: [
-    RouterLink, RouterOutlet, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule,
-    CommonModule
-  ],
+  imports:
+      [RouterLink, RouterOutlet, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule],
   styles: [`
       nav {
         padding-top: 20px;
@@ -52,8 +50,8 @@ import {DialogComponent} from './dialog.component';
   `
 })
 export class TodoAppComponent {
-  name: string;
-  animal: string;
+  name!: string;
+  animal!: string;
 
   constructor(public dialog: MatDialog) {}
 

devtools/projects/demo-standalone/src/app/demo-app/zippy.component.ts

@@ -42,6 +42,6 @@ import {Component, Input} from '@angular/core';
   `
 })
 export class ZippyComponent {
-  @Input() title: string;
+  @Input() title!: string;
   visible = false;
 }

devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts

@@ -47,5 +47,5 @@ import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
 })
 export class DevToolsComponent {
   messageBus: IFrameMessageBus|null = null;
-  @ViewChild('ref') iframe: ElementRef;
+  @ViewChild('ref') iframe!: ElementRef;
 }

devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts

@@ -23,7 +23,7 @@ export interface ComponentInspectorOptions {
 }
 
 export class ComponentInspector {
-  private _selectedComponent: {component: Type<unknown>; host: HTMLElement | null};
+  private _selectedComponent!: {component: Type<unknown>; host: HTMLElement | null};
   private readonly _onComponentEnter;
   private readonly _onComponentSelect;
   private readonly _onComponentLeave;
@@ -57,7 +57,7 @@ export class ComponentInspector {
 
     if (this._selectedComponent.component && this._selectedComponent.host) {
       this._onComponentSelect(
-          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component));
+          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!);
     }
   }
 
@@ -73,7 +73,7 @@ export class ComponentInspector {
     if (this._selectedComponent.component && this._selectedComponent.host) {
       highlight(this._selectedComponent.host);
       this._onComponentEnter(
-          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component));
+          initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)!);
     }
   }