feat(challenge 16): add TableRowDirective

Author: truonghungit

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

@@ -1,6 +1,12 @@
 import { TableComponent } from '@angular-challenges/shared/ui';
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  inject,
+  input,
+} from '@angular/core';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
@@ -22,8 +28,30 @@ export class ProductDirective {
   }
 }
 
+@Directive({
+  selector: 'tr[product]',
+})
+export class TableRowDirective {
+  private readonly currencyService = inject(CurrencyService);
+
+  product = input<Product>();
+
+  ngOnInit() {
+    const product = this.product();
+    if (product) {
+      this.currencyService.patchState({ code: product.currencyCode });
+    }
+  }
+}
+
 @Component({
-  imports: [TableComponent, CurrencyPipe, AsyncPipe, ProductDirective],
+  imports: [
+    TableComponent,
+    CurrencyPipe,
+    AsyncPipe,
+    ProductDirective,
+    TableRowDirective,
+  ],
   providers: [CurrencyService],
   selector: 'app-root',
   template: `
@@ -38,7 +66,7 @@ export class ProductDirective {
         </tr>
       </ng-template>
       <ng-template #body product let-product>
-        <tr>
+        <tr [product]="product">
           <td>{{ product.name }}</td>
           <td>{{ product.priceA | currency | async }}</td>
           <td>{{ product.priceB | currency | async }}</td>

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>