filter operator for selection in Angular - Performance & Optimization

Performance: filter operator for selection

MEDIUM IMPACT

This affects how quickly the UI updates when filtering data streams, impacting interaction responsiveness and rendering speed.

Filtering a list of items based on user input in an Angular component

Angular

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

@Component({
  selector: 'app-filter',
  template: `<input (input)="onInput($event)" aria-label="Filter items" />
             <ul><li *ngFor="let item of filteredItems">{{item}}</li></ul>`
})
export class FilterComponent {
  items = ['apple', 'banana', 'cherry', 'date'];
  filteredItems = this.items;
  input$ = new Subject<string>();

  constructor() {
    this.input$.pipe(
      map(value => value.trim()),
      debounceTime(300),
      distinctUntilChanged(),
      filter(value => value.length > 0)
    ).subscribe(value => {
      this.filteredItems = this.items.filter(item => item.includes(value));
    });
  }

  onInput(event: Event) {
    const input = (event.target as HTMLInputElement).value;
    this.input$.next(input);
  }
}

Debouncing and filtering empty inputs reduce the number of filter operations and UI updates, improving responsiveness.

📈 Performance GainReduces reflows and repaints to one per pause in typing, improving input responsiveness and lowering CPU load.

Filtering a list of items based on user input in an Angular component

Angular

import { Component } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-filter',
  template: `<input (input)="onInput($event)" />
             <ul><li *ngFor="let item of filteredItems">{{item}}</li></ul>`
})
export class FilterComponent {
  items = ['apple', 'banana', 'cherry', 'date'];
  filteredItems = this.items;
  input$ = new Subject<string>();

  constructor() {
    this.input$.subscribe(value => {
      this.filteredItems = this.items.filter(item => item.includes(value));
    });
  }

  onInput(event: Event) {
    const input = (event.target as HTMLInputElement).value;
    this.input$.next(input);
  }
}

Subscribing directly without debounce causes filtering on every keystroke, triggering many UI updates and reflows.

📉 Performance CostTriggers multiple reflows and repaints per keystroke, causing input lag and higher CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Immediate filter on every keystroke	Multiple updates per input	Multiple reflows per keystroke	High paint cost due to frequent changes	[X] Bad
Filter with debounce and distinctUntilChanged	Single update after typing pause	Single reflow per filter	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

The filter operator controls when the component updates its displayed list. Frequent updates cause repeated style recalculations, layouts, and paints. Optimizing the filter timing reduces these expensive steps.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to frequent DOM updates on each filter change.

Core Web Vital Affected

INP

This affects how quickly the UI updates when filtering data streams, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid filtering on every keystroke; use debounce to limit updates.

2Use distinctUntilChanged to skip redundant filter operations.

3Filter out empty or invalid inputs before updating the UI.

Performance Quiz - 3 Questions

What is the main performance problem when filtering data on every keystroke without debounce in Angular?

A It causes layout shifts affecting CLS.

B It increases bundle size significantly.

C It causes many reflows and repaints, slowing input responsiveness.

D It blocks the main thread for several seconds.

DevTools: Performance

How to check: Record a performance profile while typing in the filter input. Look for frequent Layout and Paint events triggered on each keystroke.

What to look for: High frequency of Layout and Paint events indicates inefficient filtering; fewer events after debounce show improved performance.

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