HttpClient & RxJS

8 snippets

18 mins

v.7

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Http & async pipe

src/app.component.ts

src/user.ts

src/main.ts

Output

How it works

1. 1

   Get Users

   The following line creates the users$ observable that sends an HTTP GET request to fetch the list of users:
   
2. 2

   async pipe & @forAngular v.17

   The async pipe subscribes to users$, and the data is automatically rendered when available.
   
   The template uses a @for loop to asynchronously iterate over users$. The async pipe automatically subscribes to the Observable and updates the DOM when the data arrives. The track by user.id ensures efficient DOM updates by uniquely identifying each user using their id.

# RxJS Pipe

src/app.component.ts

src/user.ts

src/main.ts

Output

How it works

1. 1

   pipe()

   This is the standard RxJS way to chain operators and transform the stream of data before it is emitted to the template.
   
2. 2

   map() operator

   The map() operator transforms the incoming array of User[].
   
   Inside the map(), we first filter the users and then modify each user’s name.
3. 3

   filter() array methodAngular v.17

   We use the array filter method to filter the users so that only those with an id greater than 4 are included in the final array.
   
4. 4

   map() array methodAngular v.17

   We then use the array map method to converts the array of User in array of names, transforming each user's name to uppercase: