Answer:16

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

@@ -1,8 +1,12 @@
-import { TableComponent } from '@angular-challenges/shared/ui';
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { AsyncPipe, CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  Injector,
+} from '@angular/core';
 import { CurrencyPipe } from './currency.pipe';
-import { CurrencyService } from './currency.service';
+import { CURRENCY_CODE, CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
 
 interface ProductContext {
@@ -22,33 +26,53 @@ export class ProductDirective {
 }
 
 @Component({
-  imports: [TableComponent, CurrencyPipe, AsyncPipe, ProductDirective],
-  providers: [CurrencyService],
+  imports: [CommonModule, CurrencyPipe, AsyncPipe],
   selector: 'app-root',
   template: `
-    <table [items]="products">
-      <ng-template #header>
+    <table>
+      <thead>
         <tr>
-          @for (col of displayedColumns; track $index) {
-            <th>
-              {{ col }}
-            </th>
-          }
+          <th *ngFor="let col of displayedColumns">{{ col }}</th>
         </tr>
-      </ng-template>
-      <ng-template #body product let-product>
-        <tr>
-          <td>{{ product.name }}</td>
-          <td>{{ product.priceA | currency | async }}</td>
-          <td>{{ product.priceB | currency | async }}</td>
-          <td>{{ product.priceC | currency | async }}</td>
-        </tr>
-      </ng-template>
+      </thead>
+      <tbody>
+        <ng-container *ngFor="let product of products">
+          <ng-template
+            [ngTemplateOutletInjector]="createInjector(product)"
+            [ngTemplateOutlet]="row"
+            [ngTemplateOutletContext]="{ $implicit: product }"></ng-template>
+        </ng-container>
+        <ng-template #row let-product>
+          <tr>
+            <td>{{ product.name }}</td>
+            <td>{{ product.priceA | currency | async }}</td>
+            <td>{{ product.priceB | currency | async }}</td>
+            <td>{{ product.priceC | currency | async }}</td>
+          </tr>
+        </ng-template>
+      </tbody>
     </table>
+    <ng-container
+      *ngComponentOutlet="
+        null;
+        inputs: { product: products[0] };
+        content: [[productTest], displayedColumns]
+      "></ng-container>
+    <ng-content select="[product]"></ng-content>
+    <ng-template #productTest></ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   products = products;
   displayedColumns = ['name', 'priceA', 'priceB', 'priceC'];
+
+  createInjector(product: Product) {
+    return Injector.create({
+      providers: [
+        { provide: CURRENCY_CODE, useValue: product.currencyCode },
+        CurrencyService,
+      ],
+    });
+  }
 }

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

@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map } from 'rxjs';
+export const CURRENCY_CODE = new InjectionToken<string>('CURRENCY_CODE');
 
 export interface Currency {
   name: string;
@@ -23,7 +24,7 @@ export class CurrencyService extends ComponentStore<{ code: string }> {
     map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
   );
 
-  constructor() {
-    super({ code: 'EUR' });
+  constructor(@Inject(CURRENCY_CODE) code: string) {
+    super({ code });
   }
 }