From 374821bc37389deea07cb4a922ac34cc8e5cc9e8 Mon Sep 17 00:00:00 2001 From: apalaio Date: Sat, 11 Jan 2025 20:45:12 +0100 Subject: [PATCH 1/2] feat: answer 39 injection token --- apps/angular/39-injection-token/src/app/data.ts | 9 ++++++++- .../39-injection-token/src/app/phone.component.ts | 2 ++ .../src/app/timer-container.component.ts | 6 +++--- .../39-injection-token/src/app/timer.component.ts | 9 +++++---- .../39-injection-token/src/app/video.component.ts | 2 ++ 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/apps/angular/39-injection-token/src/app/data.ts b/apps/angular/39-injection-token/src/app/data.ts index 393edd0fa..6eb48aa05 100644 --- a/apps/angular/39-injection-token/src/app/data.ts +++ b/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('default-timer'); + +export const getDefaultTimerProvider = (seconds = 1): ValueProvider => ({ + provide: TIMER, + useValue: 1000 * seconds, +}); diff --git a/apps/angular/39-injection-token/src/app/phone.component.ts b/apps/angular/39-injection-token/src/app/phone.component.ts index a58b3cd99..dccdab43f 100644 --- a/apps/angular/39-injection-token/src/app/phone.component.ts +++ b/apps/angular/39-injection-token/src/app/phone.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; +import { getDefaultTimerProvider } from './data'; import { TimerContainerComponent } from './timer-container.component'; @Component({ selector: 'app-phone', standalone: true, imports: [TimerContainerComponent], + providers: [getDefaultTimerProvider(2)], template: `
Phone Call Timer: diff --git a/apps/angular/39-injection-token/src/app/timer-container.component.ts b/apps/angular/39-injection-token/src/app/timer-container.component.ts index 30af69354..36f8c690c 100644 --- a/apps/angular/39-injection-token/src/app/timer-container.component.ts +++ b/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', @@ -17,5 +17,5 @@ import { TimerComponent } from './timer.component'; }, }) export class TimerContainerComponent { - timer = DEFAULT_TIMER; + timer = inject(TIMER); } diff --git a/apps/angular/39-injection-token/src/app/timer.component.ts b/apps/angular/39-injection-token/src/app/timer.component.ts index 95707ec61..31911f099 100644 --- a/apps/angular/39-injection-token/src/app/timer.component.ts +++ b/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))); } diff --git a/apps/angular/39-injection-token/src/app/video.component.ts b/apps/angular/39-injection-token/src/app/video.component.ts index 2c218071a..ee292798c 100644 --- a/apps/angular/39-injection-token/src/app/video.component.ts +++ b/apps/angular/39-injection-token/src/app/video.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; +import { getDefaultTimerProvider } from './data'; import { TimerContainerComponent } from './timer-container.component'; @Component({ selector: 'app-video', standalone: true, imports: [TimerContainerComponent], + providers: [getDefaultTimerProvider(1)], template: `
Video Call Timer: From a1a477a4a97e0437fbcc41b689b40fe1f969f900 Mon Sep 17 00:00:00 2001 From: apalaio Date: Tue, 14 Jan 2025 17:25:33 +0100 Subject: [PATCH 2/2] feat: answer:16 master dependency --- .../src/app/app.component.ts | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 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 f80851729..1b9a9227d 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,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,9 +22,31 @@ export class ProductDirective { } } +@Directive({ + selector: '[currencyCode]', + standalone: true, +}) +export class CurrencyCodeDirective { + service = inject(CurrencyService); + currencyCode = input(''); + + constructor() { + effect(() => { + this.service.patchState({ code: this.currencyCode() }); + }); + } +} + @Component({ standalone: true, - imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective], + imports: [ + TableComponent, + CurrencyPipe, + AsyncPipe, + NgFor, + ProductDirective, + CurrencyCodeDirective, + ], providers: [CurrencyService], selector: 'app-root', template: ` @@ -37,7 +59,7 @@ export class ProductDirective { - + {{ product.name }} {{ product.priceA | currency | async }} {{ product.priceB | currency | async }}