Project 26: Cryptocurrency Ticker

Angular Engineer

Builds on these lessons

Component Task

Objective

An InjectionToken lets you inject a plain value (not a class) through Angular's DI system — useful for configuration that different parts of the app might want overridden.

You're building a price ticker's refresh rate.

Task: write a REFRESH_INTERVAL injection token, provide it as 5000 on a TickerComponent, and inject it into the constructor to display it.

component.ts

import { Component, Inject, InjectionToken } from '@angular/core';

export const REFRESH_INTERVAL = new InjectionToken<number>('REFRESH_INTERVAL');

@Component({
  selector: 'app-ticker',
  standalone: true,
  template: `<p>Refreshing every {{ interval }}ms</p>`,
  providers: [{ provide: REFRESH_INTERVAL, useValue: 5000 }]
})
export class TickerComponent {
  constructor(@Inject(REFRESH_INTERVAL) public interval: number) {}
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →