Project 24: Calendar UI

Angular Engineer

Builds on these lessons

Component Task

Objective

The async pipe subscribes to an Observable directly in the template and automatically unsubscribes when the component is destroyed — no manual subscription or ngOnDestroy needed.

You're building a sprint calendar counter.

Task: write a CalendarComponent with a dayCount$ Observable (built from interval + map) rendered directly in the template through the async pipe.

component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Today is day {{ dayCount$ | async }} of the sprint</p>`
})
export class CalendarComponent {
  dayCount$ = interval(1000).pipe(map(n => n + 1));
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →