filter operator for selection in Angular

Introduction

The filter operator helps you pick only the data you want from a stream of values. It works like a sieve, letting through only items that match your rule.

When you want to react only to certain user actions, like clicks on a specific button.

When you receive many events but need to process only those with a certain property.

When working with data streams and you want to ignore unwanted values.

When you want to simplify your code by handling only relevant data.

When you want to avoid extra work by skipping unnecessary events.

Syntax

Angular

import { filter } from 'rxjs/operators';

observable.pipe(
  filter(value => condition)
).subscribe(filteredValue => {
  // handle filteredValue
});

The filter operator is used inside the pipe() method of an observable.

The function inside filter returns true to keep the value, or false to skip it.

Examples

This example filters even numbers from a list and prints them.

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 listens for clicks but only reacts if the click is on the right side of the screen.

Angular

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

const clicks = fromEvent(document, 'click');

clicks.pipe(
  filter((event: MouseEvent) => event.clientX > 200)
).subscribe(() => console.log('Clicked on right side'));

Sample Program

This Angular component listens for all clicks but updates the message only when Button 2 is clicked.

Angular

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-click-filter',
  template: `
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <p>{{message}}</p>
  `
})
export class ClickFilterComponent {
  message = 'Click a button';

  constructor() {
    const clicks = fromEvent(document, 'click');

    clicks.pipe(
      filter((event: MouseEvent) => {
        const target = event.target as HTMLElement;
        return target.id === 'btn2';
      })
    ).subscribe(() => {
      this.message = 'Button 2 clicked!';
    });
  }
}

Important Notes

Remember to import filter from rxjs/operators.

The filter function should be fast and simple to avoid slowing down your app.

Use TypeScript type assertions to help with event target types.

Summary

The filter operator lets you select only the values you want from a stream.

Use it inside pipe() with a function that returns true or false.

This helps keep your app efficient and focused on relevant data.

Practice

1. What does the filter operator do in Angular's RxJS streams?

easy

A. It delays the stream values by a set time.

B. It selects only the values that meet a condition.

C. It combines multiple streams into one.

D. It transforms each value into a new value.

Solution

1. Step 1: Understand the purpose of filter

   The filter operator is used to pick values from a stream that satisfy a condition.

2. Step 2: Compare with other operators

   Unlike map (which transforms) or merge (which combines), filter only selects values.

3. Final Answer:

   It selects only the values that meet a condition. -> Option B

4. Quick Check:

   filter = select values by condition [OK]

Hint: Filter picks values that return true in its function [OK]

Common Mistakes:

• Confusing filter with map operator
• Thinking filter changes values instead of selecting
• Assuming filter combines streams

2. Which is the correct syntax to use the filter operator inside an RxJS pipe() in Angular?

easy

A. source$.pipe(filter(value => value > 10))

B. source$.filter(value => value > 10)

C. source$.pipe(map(value => value > 10))

D. source$.pipe(filter(value, value > 10))

Solution

1. Step 1: Recall RxJS pipe syntax

   Operators like filter are used inside pipe as functions: pipe(filter(...)).

2. Step 2: Check the filter function argument

   The filter function takes a callback returning true/false, e.g. value => value > 10.

3. Final Answer:

   source$.pipe(filter(value => value > 10)) -> Option A

4. Quick Check:

   filter inside pipe with callback arrow function [OK]

Hint: Use filter inside pipe with a function returning true/false [OK]

Common Mistakes:

• Calling filter directly on observable without pipe
• Using map instead of filter
• Passing multiple arguments incorrectly to filter

3. Given this code snippet, what will be the output values logged?

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

of(1, 5, 10, 15).pipe(
  filter(x => x > 5)
).subscribe(console.log);

medium

A. 5, 10, 15

B. 1, 5

C. 10, 15

D. 1, 5, 10, 15

Solution

1. Step 1: Identify the filter condition

   The filter condition is x > 5, so only values greater than 5 pass.

2. Step 2: Check which values pass

   From the values 1, 5, 10, 15, only 10 and 15 are greater than 5.

3. Final Answer:

   10, 15 -> Option C

4. Quick Check:

   Values > 5 = 10, 15 [OK]

Hint: Filter keeps values where condition is true [OK]

Common Mistakes:

• Including values equal to 5 (should be > 5)
• Confusing filter with map output
• Assuming all values pass filter

4. What is wrong with this Angular RxJS code using filter?

source$.pipe(
  filter(x => {
    if (x % 2 === 0) return true;
  })
).subscribe(console.log);

medium

A. The filter callback does not return false for odd numbers.

B. The filter operator is used outside pipe.

C. The subscribe method is missing.

D. The filter callback should return a number, not boolean.

Solution

1. Step 1: Analyze the filter callback function

   The callback returns true for even numbers but returns undefined (no return) for odd numbers.

2. Step 2: Understand filter expects boolean return

   Filter needs true or false; undefined is treated as false but is unclear and error-prone.

3. Final Answer:

   The filter callback does not return false for odd numbers. -> Option A

4. Quick Check:

   Filter callback must return true or false explicitly [OK]

Hint: Always return true or false in filter callback [OK]

Common Mistakes:

• Missing explicit false return in filter
• Using filter outside pipe
• Confusing filter callback return types

5. You want to filter a stream of user objects to only those who are active and have age over 18. Which filter function correctly applies both conditions inside pipe()?

users$.pipe(
  filter( /* your code here */ )
).subscribe(activeAdults => console.log(activeAdults));

hard

A. user => user.isActive && user.age >= 18

B. user => user.isActive || user.age > 18

C. user => user.isActive && user.age > 18 && user.name

D. user => user.isActive && user.age > 18

Solution

1. Step 1: Understand the conditions

   We want users who are active AND older than 18 (strictly greater).

2. Step 2: Check each option's logic

   user => user.isActive && user.age > 18 uses && with user.isActive and user.age > 18, matching requirements exactly.

3. Final Answer:

   user => user.isActive && user.age > 18 -> Option D

4. Quick Check:

   Both conditions true with AND operator [OK]

Hint: Use && to combine multiple filter conditions [OK]

Common Mistakes:

• Using || instead of && to combine conditions
• Using >= instead of > if strict condition needed
• Adding unrelated conditions like user.name