Angular Academy · Lesson

Filtering Operators

Filter streams with filter, debounceTime, distinctUntilChanged.

Lesson 2 of 413 steps

Filtering Operators is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Filtering Operators” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Filtering Operators”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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