filter operator for selection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component using filter operator?

Consider this Angular component using RxJS filter operator to select values:

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

@Component({
  selector: 'app-filter-demo',
  standalone: true,
  template: `<div>Filtered Values: {{ filteredValues() }}</div>`
})
export class FilterDemoComponent {
  filteredValues = signal([]);

  constructor() {
    const source$ = from(['apple', 'banana', 'cherry', 'date']);
    source$.pipe(
      filter(fruit => fruit.length > 5)
    ).subscribe(value => {
      this.filteredValues.update(arr => [...arr, value]);
    });
  }
}

What will be displayed inside the <div> after component initialization?

Angular

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

@Component({
  selector: 'app-filter-demo',
  standalone: true,
  template: `<div>Filtered Values: {{ filteredValues() }}</div>`
})
export class FilterDemoComponent {
  filteredValues = signal<string[]>([]);

  constructor() {
    const source$ = from(['apple', 'banana', 'cherry', 'date']);
    source$.pipe(
      filter(fruit => fruit.length > 5)
    ).subscribe(value => {
      this.filteredValues.update(arr => [...arr, value]);
    });
  }
}

A Filtered Values: banana

B Filtered Values: apple,banana,cherry,date

C Filtered Values: apple,date

D Filtered Values: banana,cherry

💡 Hint

Think about which fruits have names longer than 5 characters.

The filter operator selects only fruits with length greater than 5. 'banana' and 'cherry' have 6 letters, so they pass the filter. 'apple' and 'date' do not.

📝 Syntax

intermediate

Which option correctly uses the filter operator in Angular with RxJS?

Choose the correct syntax to filter emitted values from an observable numbers$ to only even numbers.

Angular

import { filter } from 'rxjs/operators';

numbers$.pipe(
  // filter condition here
).subscribe(console.log);

A filter(n => n % 2 === 0)

B filter(n => n / 2 === 0)

C filter(n => n % 2 = 0)

D filter(n => n & 2 === 0)

💡 Hint

Remember the modulo operator % returns the remainder.

Option A correctly uses n % 2 === 0 to check if a number is even. Option A uses division incorrectly, C uses assignment instead of comparison, and D uses bitwise AND incorrectly.

🔧 Debug

advanced

Why does this Angular RxJS filter code not emit any values?

Look at this code snippet:

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

const source$ = from([1, 2, 3, 4]);
source$.pipe(
  filter(x => x > 5)
).subscribe(console.log);

Why does it not print anything?

Angular

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

const source$ = from([1, 2, 3, 4]);
source$.pipe(
  filter(x => x > 5)
).subscribe(console.log);

A Because the subscribe callback is missing.

B Because the observable source$ is empty.

C Because no values in the array are greater than 5, so filter excludes all.

D Because the filter operator is not imported correctly.

💡 Hint

Check the condition inside the filter and the source array values.

The filter condition x > 5 excludes all numbers since none in [1,2,3,4] are greater than 5. So no values are emitted.

❓ state_output

advanced

What is the final state of the signal after filtering and updating?

Given this Angular component snippet:

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

@Component({
  selector: 'app-signal-filter',
  standalone: true,
  template: `<div>Count: {{ count() }}</div>`
})
export class SignalFilterComponent {
  count = signal(0);

  constructor() {
    const source$ = from([10, 15, 20, 25]);
    source$.pipe(
      filter(x => x % 10 === 0)
    ).subscribe(() => {
      this.count.update(c => c + 1);
    });
  }
}

What will be the value of count() after subscription completes?

Angular

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

@Component({
  selector: 'app-signal-filter',
  standalone: true,
  template: `<div>Count: {{ count() }}</div>`
})
export class SignalFilterComponent {
  count = signal(0);

  constructor() {
    const source$ = from([10, 15, 20, 25]);
    source$.pipe(
      filter(x => x % 10 === 0)
    ).subscribe(() => {
      this.count.update(c => c + 1);
    });
  }
}

A Count: 4

B Count: 2

C Count: 3

D Count: 0

💡 Hint

Count how many numbers in the array are divisible by 10.

Only 10 and 20 satisfy x % 10 === 0. So the count increments twice, resulting in 2.

🧠 Conceptual

expert

Which statement best describes the behavior of the filter operator in Angular RxJS streams?

Choose the most accurate description of how the filter operator works in Angular RxJS streams.

A It selectively emits only those values from the source observable that satisfy the given condition.

B It transforms each emitted value into a new value based on a condition.

C It blocks all values until a condition is true, then emits all values after.

D It accumulates values over time and emits the accumulated result when the condition is met.

💡 Hint

Think about whether filter changes values or just decides which to pass through.

The filter operator does not change values; it only lets through values that meet the condition, ignoring others.

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