Angular Academy · Lesson

Filtering Operators

Filter streams with filter, debounceTime, distinctUntilChanged.

Filtering Operators is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What filtering operators do

Filtering operators decide which emitted values pass through and which are dropped, or how often values are allowed. They are essential for clean, efficient streams.

filter

filter emits only values that pass a predicate — like Array.filter over time.

import { of, filter } from 'rxjs';

of(1, 2, 3, 4).pipe(
  filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4

debounceTime

debounceTime waits for a pause in emissions, then emits the latest value. It is the classic fix for noisy input events.

import { debounceTime } from 'rxjs';

searchInput$.pipe(
  debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silence

distinctUntilChanged

distinctUntilChanged drops a value if it equals the previous one, avoiding redundant work.

import { of, distinctUntilChanged } from 'rxjs';

of('a', 'a', 'b', 'b', 'a').pipe(
  distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a

Combining for search

The canonical search pipeline combines all three to minimize requests.

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));

take

take(n) emits the first n values then completes the stream — handy for one-shot reads of an ongoing source.

import { interval, take } from 'rxjs';

interval(1000).pipe(
  take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then complete

first and last

first() emits the first value (optionally matching a predicate) then completes; last() emits the final value on completion.

import { of, first, last } from 'rxjs';

of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v));  // 3

takeWhile and skip

takeWhile emits while a condition holds then completes; skip(n) ignores the first n values.

import { of, takeWhile, skip } from 'rxjs';

of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
  .subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3

throttleTime vs debounceTime

throttleTime emits the first value then ignores others for a window — good for rate-limiting scroll. debounceTime waits for silence — good for search. They are not the same.

distinctUntilChanged with key

For objects, pass a comparator or key selector so equality is based on the relevant field.

source$.pipe(
  distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));

Why filtering matters

Filtering reduces unnecessary HTTP calls, re-renders, and computation. A well-filtered stream can cut a search feature from dozens of requests to just a few.

Quick Check

Test your understanding of filtering operators.

Recap: Filtering Operators

Filtering operators control which and how often values flow.

filter: predicate-based pass-through.
debounceTime: wait for silence.
distinctUntilChanged: drop repeats.
take/first/skip: positional control.

Next: combination operators.

Frequently asked questions

Is the “Filtering Operators” lesson free?

Yes — the full text of “Filtering Operators” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Filtering Operators”?

Filter streams with filter, debounceTime, distinctUntilChanged. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Filtering Operators” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy