diff --git a/apps/angular/39-injection-token/src/app/data.ts b/apps/angular/39-injection-token/src/app/data.ts
index 393edd0fa..6dd5015f4 100644
--- a/apps/angular/39-injection-token/src/app/data.ts
+++ b/apps/angular/39-injection-token/src/app/data.ts
@@ -1 +1,3 @@
-export const DEFAULT_TIMER = 1000;
+import { InjectionToken } from '@angular/core';
+
+export const DEFAULT_TIMER = new InjectionToken<number>('timer');
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 41ee3cfc0..cb03f2dd8 100644
--- a/apps/angular/39-injection-token/src/app/phone.component.ts
+++ b/apps/angular/39-injection-token/src/app/phone.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DEFAULT_TIMER } from './data';
 import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-phone',
   imports: [TimerContainerComponent],
+  providers: [{ provide: DEFAULT_TIMER, useValue: 2000 }],
   template: `
     <div class="flex gap-2">
       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 67db6059a..e812f0b08 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,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DEFAULT_TIMER } from './data';
 import { TimerComponent } from './timer.component';
 @Component({
@@ -16,5 +16,5 @@ import { TimerComponent } from './timer.component';
   },
 })
 export class TimerContainerComponent {
-  timer = DEFAULT_TIMER;
+  timer = inject(DEFAULT_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 335a077bf..91a514b75 100644
--- a/apps/angular/39-injection-token/src/app/timer.component.ts
+++ b/apps/angular/39-injection-token/src/app/timer.component.ts
@@ -1,4 +1,4 @@
-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';
@@ -10,5 +10,6 @@ import { DEFAULT_TIMER } from './data';
   `,
 })
 export class TimerComponent {
-  timer = toSignal(interval(DEFAULT_TIMER));
+  defaultTimer = inject(DEFAULT_TIMER);
+  timer = toSignal(interval(this.defaultTimer));
 }
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 ba0a218b4..f72521609 100644
--- a/apps/angular/39-injection-token/src/app/video.component.ts
+++ b/apps/angular/39-injection-token/src/app/video.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DEFAULT_TIMER } from './data';
 import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-video',
   imports: [TimerContainerComponent],
+  providers: [{ provide: DEFAULT_TIMER, useValue: 1000 }],
   template: `
     <div class="flex gap-2">
       Video Call Timer: