Answer:16 master dependency injection

apps/angular/16-master-dependency-injection/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { TableComponent } from '@angular-challenges/shared/ui';
 import { AsyncPipe, NgFor } from '@angular/common';
-import { Component, Directive } from '@angular/core';
+import { Component, Directive, effect, inject, input } from '@angular/core';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
@@ -22,8 +22,31 @@ export class ProductDirective {
   }
 }
 
+@Directive({
+  selector: '[currencyCode]',
+  standalone: true,
+})
+export class CurrencyCodeDirective {
+  service = inject(CurrencyService);
+  currencyCode = input<string>('');
+
+  constructor() {
+    effect(() => {
+      this.service.patchState({ code: this.currencyCode() });
+    });
+  }
+}
+
 @Component({
-  imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
+  standalone: true,
+  imports: [
+    TableComponent,
+    CurrencyPipe,
+    AsyncPipe,
+    NgFor,
+    ProductDirective,
+    CurrencyCodeDirective,
+  ],
   providers: [CurrencyService],
   selector: 'app-root',
   template: `
@@ -36,7 +59,7 @@ export class ProductDirective {
         </tr>
       </ng-template>
       <ng-template #body product let-product>
-        <tr>
+        <tr [currencyCode]="product.currencyCode">
           <td>{{ product.name }}</td>
           <td>{{ product.priceA | currency | async }}</td>
           <td>{{ product.priceB | currency | async }}</td>

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

@@ -1 +1,8 @@
-export const DEFAULT_TIMER = 1000;
+import { InjectionToken, ValueProvider } from '@angular/core';
+
+export const TIMER = new InjectionToken<number>('default-timer');
+
+export const getDefaultTimerProvider = (seconds = 1): ValueProvider => ({
+  provide: TIMER,
+  useValue: 1000 * seconds,
+});

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

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

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

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { DEFAULT_TIMER } from './data';
+import { Component, inject } from '@angular/core';
+import { TIMER } from './data';
 import { TimerComponent } from './timer.component';
 @Component({
   selector: 'timer-container',
@@ -16,5 +16,5 @@ import { TimerComponent } from './timer.component';
   },
 })
 export class TimerContainerComponent {
-  timer = DEFAULT_TIMER;
+  timer = inject(TIMER);
 }

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

@@ -1,15 +1,16 @@
-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 } from './data';
 
 @Component({
   selector: 'timer',
   standalone: true,
   template: `
-    Timer running {{ timer() }}
+    Timer running {{ timerRunning() }}
   `,
 })
 export class TimerComponent {
-  timer = toSignal(interval(DEFAULT_TIMER));
+  timer = inject(TIMER);
+  timerRunning = toSignal(interval(inject(TIMER)));
 }

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

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { getDefaultTimerProvider } from './data';
 import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-video',
   imports: [TimerContainerComponent],
+  providers: [getDefaultTimerProvider(1)],
   template: `
     <div class="flex gap-2">
       Video Call Timer: