tap operator for side effects in Angular - Mini Project: Build & Apply

Using the tap Operator for Side Effects in Angular

📖 Scenario: You are building a simple Angular component that fetches a list of users from a service. You want to log each user to the console as they are received, without changing the data stream.

🎯 Goal: Create an Angular component that uses the tap operator to log user data for side effects while fetching users from a service.

📋 What You'll Learn

Create a users array with three user objects having id and name properties

Create a boolean variable isLoading to track loading state

Use the tap operator in the observable pipeline to log each user to the console

Set isLoading to false after users are fetched

💡 Why This Matters

🌍 Real World

Logging data during observable streams helps debug and monitor data flow in Angular apps without affecting the data itself.

💼 Career

Understanding tap and side effects is essential for Angular developers to manage asynchronous data and side effects cleanly.

1

Set up the users data array

Create a variable called users as an array with these exact objects: { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, and { id: 3, name: 'Charlie' }.

Angular

// Create the users array with three user objects
// Your code here

Need a hint?

Use an array with objects inside square brackets. Each object has id and name keys.

2

Add a loading state variable

Create a boolean variable called isLoading and set it to true to represent that data is loading.

Angular

users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// Create isLoading variable and set it to true
// Your code here

Need a hint?

Use a simple variable assignment with true value.

3

Use tap operator to log users

Use the tap operator in an observable pipeline to log each user to the console. Use users$ as the observable of the users array and apply tap(user => console.log(user)).

Angular

users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

isLoading = true;

// Create users$ observable from users array and use tap to log each user
// Your code here

Need a hint?

Use of(...this.users) to create an observable emitting each user, then pipe tap to log.

4

Set loading to false after fetching users

Subscribe to users$ and set isLoading to false inside the subscription to indicate loading is done.

Angular

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

users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

isLoading = true;

users$ = of(...this.users).pipe(
  tap(user => console.log(user))
);

// Subscribe to users$ and set isLoading to false inside subscription
// Your code here

Need a hint?

Use subscribe on users$ and update isLoading inside the callback.