From 4c2c8be945a50825fbc4c71622d5a82d7e09bbbc Mon Sep 17 00:00:00 2001
From: Hien Pham <phhien203@gmail.com>
Date: Tue, 23 Jun 2026 22:22:05 +0300
Subject: [PATCH] chore: answer:16 dependency injection

---
 .../src/app/app.component.ts                  | 33 ++++++++++++++++---
 libs/shared/ui/src/lib/table.component.ts     |  3 +-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/angular/16-master-dependency-injection/src/app/app.component.ts b/apps/angular/16-master-dependency-injection/src/app/app.component.ts
index 531d946d3..8c2dafb62 100644
--- a/apps/angular/16-master-dependency-injection/src/app/app.component.ts
+++ b/apps/angular/16-master-dependency-injection/src/app/app.component.ts
@@ -1,6 +1,13 @@
 import { TableComponent } from '@angular-challenges/shared/ui';
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  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,9 +29,27 @@ export class ProductDirective {
   }
 }
 
-@Component({
-  imports: [TableComponent, CurrencyPipe, AsyncPipe, ProductDirective],
+@Directive({
+  selector: 'tr[currencyCode]',
   providers: [CurrencyService],
+})
+export class ProductRowDirective {
+  #currencyService = inject(CurrencyService);
+  currencyCode = input.required<string>();
+
+  #syncCodeEffectRef = effect(() => {
+    this.#currencyService.patchState({ code: this.currencyCode() });
+  });
+}
+
+@Component({
+  imports: [
+    TableComponent,
+    CurrencyPipe,
+    AsyncPipe,
+    ProductDirective,
+    ProductRowDirective,
+  ],
   selector: 'app-root',
   template: `
     <table [items]="products">
@@ -38,7 +63,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>
diff --git a/libs/shared/ui/src/lib/table.component.ts b/libs/shared/ui/src/lib/table.component.ts
index 7b5159326..1c38c6696 100644
--- a/libs/shared/ui/src/lib/table.component.ts
+++ b/libs/shared/ui/src/lib/table.component.ts
@@ -1,9 +1,10 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, contentChild, input, TemplateRef } from '@angular/core';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'table',
-  imports: [],
+  imports: [NgTemplateOutlet],
   template: `
     <thead>
       <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>