filter operator for selection in Angular - Step-by-Step Execution

Concept Flow - filter operator for selection

Start Observable Stream

↓

Emit values over time

↓

Apply filter operator

↓

Check each value with condition

↓

Pass value

↓

Emit filtered values

↓

Subscribe

The filter operator checks each emitted value from an observable. It passes only those values that meet a condition to the subscriber.

Execution Sample

Angular

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

of(1, 2, 3, 4, 5).pipe(
  filter(x => x % 2 === 0)
).subscribe(console.log);

This code emits numbers 1 to 5, filters only even numbers, and logs them.

Execution Table

Step	Emitted Value	Condition (x % 2 === 0)	Pass or Skip	Output Emitted
1	1	1 % 2 === 0 -> false	Skip
2	2	2 % 2 === 0 -> true	Pass	2
3	3	3 % 2 === 0 -> false	Skip
4	4	4 % 2 === 0 -> true	Pass	4
5	5	5 % 2 === 0 -> false	Skip

💡 All values emitted and filtered; only even numbers passed to output.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
Emitted Value	-	1	2	3	4	5
Condition Result	-	false	true	false	true	false
Output Emitted	-		2		4

Key Moments - 2 Insights

Why are some emitted values not passed to the output?

Values that do not satisfy the filter condition (false in 'Condition Result' column) are skipped and not emitted, as shown in rows 1, 3, and 5 of the execution table.

Does the filter operator change the order of values?

No, the filter operator only removes values that don't meet the condition but keeps the order of passed values, as seen in the output sequence 2 then 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the output emitted at step 4?

A 4

B 3

C No output

D 2

💡 Hint

Check the 'Output Emitted' column at step 4 in the execution table.

At which step does the condition first evaluate to true?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Condition (x % 2 === 0)' column in the execution table.

If the filter condition changed to x > 3, which output would be emitted at step 3?

A 3

B No output

C 2

D 4

💡 Hint

Refer to the variable_tracker and think about the condition x > 3 for value 3.

Concept Snapshot

filter operator in Angular RxJS:
- Takes emitted values from an observable
- Checks each value against a condition
- Passes only values that meet the condition
- Skips others silently
- Keeps order of passed values
- Used with .pipe(filter(condition))

Full Transcript

The filter operator in Angular RxJS listens to values emitted by an observable. For each value, it checks if the value meets a condition. If yes, it passes the value to the subscriber. If not, it skips it. For example, filtering even numbers from 1 to 5 results in only 2 and 4 being emitted. The order of values is preserved. This helps select only desired data from streams.