Answer:39

apps/angular/39-injection-token/src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
+import { timerProvider } from './data';
 
 @Component({
   imports: [RouterOutlet, RouterLink],
+  standalone: true,
   selector: 'app-root',
+  providers: [timerProvider],
   template: `
     <div class="mb-5 flex gap-4">
       <button class="rounded-md border px-4 py-2" routerLink="video">

apps/angular/39-injection-token/src/app/data.ts

@@ -1 +1,5 @@
-export const DEFAULT_TIMER = 1000;
+import { InjectionToken, Provider } from '@angular/core';
+
+export const TIMER_VALUE = new InjectionToken<number>('DEFAULT_TIMER');
+
+export const timerProvider: Provider = { provide: TIMER_VALUE, useValue: 1000 };

apps/angular/39-injection-token/src/app/phone.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { TIMER_VALUE } from './data';
 import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-phone',
+  standalone: true,
   imports: [TimerContainerComponent],
+  providers: [{ provide: TIMER_VALUE, useValue: 2000 }],
   template: `
     <div class="flex gap-2">
       Phone Call Timer:

apps/angular/39-injection-token/src/app/timer-container.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
-import { DEFAULT_TIMER } from './data';
+import { Component, inject } from '@angular/core';
+import { TIMER_VALUE } from './data';
 import { TimerComponent } from './timer.component';
 @Component({
   selector: 'timer-container',
+  standalone: true,
   imports: [TimerComponent],
   template: `
     <div class="flex gap-2">
@@ -16,5 +17,5 @@ import { TimerComponent } from './timer.component';
   },
 })
 export class TimerContainerComponent {
-  timer = DEFAULT_TIMER;
+  timer = inject(TIMER_VALUE);
 }

apps/angular/39-injection-token/src/app/timer.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { interval } from 'rxjs';
-import { DEFAULT_TIMER } from './data';
+import { TIMER_VALUE } from './data';
 
 @Component({
   selector: 'timer',
@@ -11,5 +11,6 @@ import { DEFAULT_TIMER } from './data';
   `,
 })
 export class TimerComponent {
-  timer = toSignal(interval(DEFAULT_TIMER));
+  #token = inject(TIMER_VALUE);
+  timer = toSignal(interval(this.#token));
 }

apps/signal/43-signal-input/src/app/user.component.ts

@@ -16,6 +16,7 @@ const ageToCategory = (age: number): Category => {
 
 @Component({
   selector: 'app-user',
+  standalone: true,
   imports: [TitleCasePipe],
   template: `
     {{ fullName | titlecase }} plays tennis in the {{ category }} category!!