feat(injectionToken): create new challenge on injectionToken

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [RouterOutlet, RouterLink],
+  selector: 'app-root',
+  template: ` <div class="flex gap-4 mb-5">
+      <button class="border rounded-md px-4 py-2" routerLink="video">
+        Video
+      </button>
+      <button class="border rounded-md px-4 py-2" routerLink="phone">
+        Phone
+      </button>
+    </div>
+    <router-outlet />`,
+  host: {
+    class: 'p-10 flex flex-col',
+  },
+})
+export class AppComponent {}

apps/angular/injection-token/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter([
+      { path: '', pathMatch: 'full', redirectTo: 'video' },
+      { path: 'video', loadComponent: () => import('./video.component') },
+      { path: 'phone', loadComponent: () => import('./phone.component') },
+    ]),
+  ],
+};

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

@@ -0,0 +1 @@
+export const DEFAULT_TIMER = 1000;

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { TimerContainerComponent } from './timer-container.component';
+
+@Component({
+  standalone: true,
+  imports: [TimerContainerComponent],
+  template: `<div class="flex gap-2">
+      Phone Call Timer:
+      <p class="italic">(should be 2000s)</p>
+    </div>
+    <timer-container />`,
+})
+export default class PhoneComponent {}

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { DEFAULT_TIMER } from './data';
+import { TimerComponent } from './timer.component';
+@Component({
+  selector: 'timer-container',
+  standalone: true,
+  imports: [TimerComponent],
+  template: `
+    <div class="flex gap-2">
+      Timer container:
+      <p class="italic">(timer is {{ timer }}s)</p>
+    </div>
+    <timer />
+  `,
+  host: {
+    class: 'border rounded-md flex p-4 gap-10',
+  },
+})
+export class TimerContainerComponent {
+  timer = DEFAULT_TIMER;
+}

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { interval } from 'rxjs';
+import { DEFAULT_TIMER } from './data';
+
+@Component({
+  selector: 'timer',
+  standalone: true,
+  template: ` Timer running {{ timer() }} `,
+})
+export class TimerComponent {
+  timer = toSignal(interval(DEFAULT_TIMER));
+}

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { TimerContainerComponent } from './timer-container.component';
+
+@Component({
+  standalone: true,
+  imports: [TimerContainerComponent],
+  template: `<div class="flex gap-2">
+      Video Call Timer:
+      <p class="italic">(should be the default 1000s)</p>
+    </div>
+    <timer-container />`,
+})
+export default class VideoComponent {}