**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Pipes and Observables **Topic:** Create a data-driven application that utilizes pipes and observables for data display. **Overview** In this lab, we will create a data-driven application that utilizes pipes and observables to display data. We will use the concepts learned in the previous topics to create a real-world application. By the end of this lab, you will have hands-on experience with using pipes and observables to handle asynchronous data streams and display them in your Angular application. **Lab Objective** * Create a data-driven application that uses observables to fetch data from a RESTful API. * Use pipes to transform and display the fetched data. * Understand how to use the async pipe to handle asynchronous data streams. **Step 1: Create a new Angular Project** Open your terminal and run the following command to create a new Angular project: ```bash ng new observable-pipe-app ``` **Step 2: Create a RESTful API** For this lab, we will use a simple RESTful API that returns a list of users. You can use a service like [JSONPlaceholder](https://jsonplaceholder.typicode.com/) or create your own API. **Step 3: Create a Service to Fetch Data** Create a new file called `user.service.ts` with the following code: ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https://jsonplaceholder.typicode.com/users'; constructor(private http: HttpClient) { } getUsers() { return this.http.get(this.apiUrl); } } ``` This service uses the HttpClient to fetch data from the API. **Step 4: Create a Component to Display Data** Create a new file called `user-list.component.ts` with the following code: ```typescript import { Component, OnInit } from '@angular/core'; import { UserService } from '../user.service'; @Component({ selector: 'app-user-list', template: `

• {{ user.name }}

` }) export class UserListComponent implements OnInit { users; constructor(private userService: UserService) { } ngOnInit(): void { this.users = this.userService.getUsers(); } } ``` This component uses the async pipe to handle the asynchronous data stream returned by the service. **Step 5: Create a Pipe to Transform Data** Create a new file called `uppercase.pipe.ts` with the following code: ```typescript import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'uppercase' }) export class UppercasePipe implements PipeTransform { transform(value: any): any { return value.toUpperCase(); } } ``` This pipe transforms the input value to uppercase. **Step 6: Use the Pipe in the Component** Update the component template to use the uppercase pipe: ```typescript template: `

• {{ user.name | uppercase }}

` ``` This component now uses the uppercase pipe to transform the user name to uppercase. **Conclusion** In this lab, we created a data-driven application that utilizes pipes and observables to display data. We used the async pipe to handle asynchronous data streams and created a custom pipe to transform the data. **Key Takeaways** * Use observables to fetch data from a RESTful API. * Use pipes to transform and display data. * Use the async pipe to handle asynchronous data streams. **External Resources** * [Angular Pipes Documentation](https://angular.io/guide/pipes) * [RxJS Documentation](https://rxjs-dev.firebaseapp.com/) * [JSONPlaceholder API](https://jsonplaceholder.typicode.com/) **Assessment** * Create a new Angular project that uses observables and pipes to display data. * Use the async pipe to handle asynchronous data streams. * Create a custom pipe to transform the data. **Leave a Comment/Ask for Help** If you have any questions or need help with the lab, please leave a comment below.

ng new observable-pipe-app

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get(this.apiUrl);
  }

}

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users | async">
        {{ user.name }}
      </li>
    </ul>
  `
})
export class UserListComponent implements OnInit {

  users;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.users = this.userService.getUsers();
  }

}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {

  transform(value: any): any {
    return value.toUpperCase();
  }

}

template: `
  <ul>
    <li *ngFor="let user of users | async">
      {{ user.name | uppercase }}
    </li>
  </ul>
`