feat(): migrate everything to input signals

Author: tomalaforge

apps/angular/13-highly-customizable-css/src/app/static-text.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { TextComponent } from './text.component';
 
 export type StaticTextType = 'normal' | 'warning' | 'error';
@@ -8,25 +8,31 @@ export type StaticTextType = 'normal' | 'warning' | 'error';
   selector: 'static-text',
   imports: [TextComponent],
   template: `
-    <text [font]="font" [color]="color">This is a static text</text>
+    <text [font]="font()" [color]="color()">This is a static text</text>
   `,
 })
 export class TextStaticComponent {
-  @Input() set type(type: StaticTextType) {
-    switch (type) {
-      case 'error': {
-        this.font = 30;
-        this.color = 'red';
-        break;
-      }
-      case 'warning': {
-        this.font = 25;
-        this.color = 'orange';
-        break;
-      }
+  type = input<StaticTextType>('normal');
+
+  font = computed(() => {
+    switch (this.type()) {
+      case 'error':
+        return 30;
+      case 'warning':
+        return 25;
+      default:
+        return 10;
     }
-  }
+  });
 
-  font = 10;
-  color = 'black';
+  color = computed(() => {
+    switch (this.type()) {
+      case 'error':
+        return 'red';
+      case 'warning':
+        return 'orange';
+      default:
+        return 'black';
+    }
+  });
 }

apps/angular/13-highly-customizable-css/src/app/text.component.ts

@@ -1,16 +1,15 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'text',
-  standalone: true,
   template: `
     <p style="font-size: {{ font }}px; color: {{ color }}">
-      <ng-content></ng-content>
+      <ng-content />
     </p>
   `,
 })
 export class TextComponent {
-  @Input() font = 10;
-  @Input() color = 'black';
+  font = input(10);
+  color = input('black');
 }

apps/angular/21-anchor-navigation/src/app/nav-button.component.ts

@@ -1,17 +1,17 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
+
 @Component({
   selector: 'nav-button',
-  standalone: true,
   template: `
-    <a [href]="href">
-      <ng-content></ng-content>
+    <a [href]="href()">
+      <ng-content />
     </a>
   `,
   host: {
     class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
   },
 })
 export class NavButtonComponent {
-  @Input() href = '';
+  href = input('');
 }

apps/angular/32-change-detection-bug/src/app/main-navigation.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
 
@@ -12,7 +12,7 @@ interface MenuItem {
   selector: 'app-nav',
   imports: [RouterLink, RouterLinkActive],
   template: `
-    @for (menu of menus; track menu.path) {
+    @for (menu of menus(); track menu.path) {
       <a
         class="rounded-md border px-4 py-2"
         [routerLink]="menu.path"
@@ -33,7 +33,7 @@ interface MenuItem {
   },
 })
 export class NavigationComponent {
-  @Input() menus!: MenuItem[];
+  menus = input.required<MenuItem[]>();
 }
 
 @Component({

apps/angular/5-crud-application/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { randText } from '@ngneat/falso';
 
 @Component({
@@ -15,9 +15,9 @@ import { randText } from '@ngneat/falso';
   styles: [],
 })
 export class AppComponent implements OnInit {
-  todos!: any[];
+  private http = inject(HttpClient);
 
-  constructor(private http: HttpClient) {}
+  todos!: any[];
 
   ngOnInit(): void {
     this.http

apps/angular/6-structural-directive/src/app/app.component.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   imports: [RouterOutlet],
   selector: 'app-root',
   template: `
-    <router-outlet></router-outlet>
+    <router-outlet />
   `,
-  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

apps/angular/6-structural-directive/src/app/button.component.ts

@@ -2,10 +2,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'button[app-button]',
   template: `
-    <ng-content></ng-content>
+    <ng-content />
   `,
   host: {
     class: 'border border-blue-700 bg-blue-400 p-2 rounded-sm text-white',

apps/angular/6-structural-directive/src/app/information.component.ts

@@ -1,10 +1,8 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { UserStore } from './user.store';
 
 @Component({
   selector: 'app-information',
-  imports: [CommonModule],
   template: `
     <h2 class="mt-10 text-xl">Information Panel</h2>
     <!-- admin can see everything -->
@@ -18,6 +16,7 @@ import { UserStore } from './user.store';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InformationComponent {
+  private readonly userStore = inject(UserStore);
+
   user$ = this.userStore.user$;
-  constructor(private userStore: UserStore) {}
 }

apps/angular/6-structural-directive/src/app/login.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { ButtonComponent } from './button.component';
 import { InformationComponent } from './information.component';
@@ -28,15 +28,15 @@ import { UserStore } from './user.store';
       <button app-button (click)="everyone()">Everyone</button>
     </header>
 
-    <app-information></app-information>
+    <app-information />
 
     <button app-button class="mt-10" routerLink="enter">
       Enter application
     </button>
   `,
 })
 export class LoginComponent {
-  constructor(private userStore: UserStore) {}
+  private readonly userStore = inject(UserStore);
 
   admin() {
     this.userStore.add(admin);

apps/performance/34-default-vs-onpush/src/app/person-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
 import { TitleCasePipe } from '@angular/common';
@@ -20,8 +20,8 @@ import { MatListModule } from '@angular/material/list';
     TitleCasePipe,
   ],
   template: `
-    <h1 cd-flash class="text-center font-semibold" title="Title">
-      {{ title | titlecase }}
+    <h1 class="text-center font-semibold" title="Title">
+      {{ title() | titlecase }}
     </h1>
 
     <mat-form-field class="w-4/5" cd-flash>
@@ -34,10 +34,10 @@ import { MatListModule } from '@angular/material/list';
     </mat-form-field>
 
     <mat-list class="flex w-full">
-      @if (names?.length === 0) {
+      @if (names()?.length === 0) {
         <div class="empty-list-label">Empty list</div>
       }
-      @for (name of names; track name) {
+      @for (name of names(); track name) {
         <mat-list-item cd-flash class="text-orange-500">
           <div class="flex justify-between">
             <h3 title="Name">
@@ -46,7 +46,7 @@ import { MatListModule } from '@angular/material/list';
           </div>
         </mat-list-item>
       }
-      @if (names?.length !== 0) {
+      @if (names()?.length !== 0) {
         <mat-divider></mat-divider>
       }
     </mat-list>
@@ -56,14 +56,14 @@ import { MatListModule } from '@angular/material/list';
   },
 })
 export class PersonListComponent {
-  @Input() names: string[] = [];
-  @Input() title = '';
+  names = input<string[]>([]);
+  title = input('');
 
   label = '';
 
   handleKey(event: KeyboardEvent) {
     if (event.key === 'Enter') {
-      this.names?.unshift(this.label);
+      this.names()?.unshift(this.label);
       this.label = '';
     }
   }