Project 23: Weather Widget

Angular Engineer

Builds on these lessons

Component Task

Objective

.pipe() chains RxJS operators together. debounceTime waits for a pause in events before emitting; map transforms each emitted value — a classic combo for a search-as-you-type field.

You're building a weather widget's city search.

Task: write a WeatherSearchComponent whose input pushes each keystroke into a citySearch$ Subject, piped through debounceTime(300) and map to lowercase/trim the value before logging it.

component.ts

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

@Component({
  selector: 'app-weather-search',
  standalone: true,
  template: `<input (input)="citySearch$.next($any($event.target).value)">`
})
export class WeatherSearchComponent {
  citySearch$ = new Subject<string>();

  constructor() {
    this.citySearch$
      .pipe(
        debounceTime(300),
        map(city => city.trim().toLowerCase())
      )
      .subscribe(city => console.log('Searching weather for:', city));
  }
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →