5. a . Built in Pipes

 AIM: Display the product code in lowercase and product name in uppercase using built-in

pipes.

Create a Component product-list

ng generate component product-list

1. Prepare Your Data:

Update component.ts file with an array of products in its class:

import { Component } from '@angular/core'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', }) export class ProductListComponent { products = [ { code: 'ABC123', name: 'Sample Product 1' }, { code: 'XYZ456', name: 'Sample Product 2' }, // ... other products ]; }

2. Use Built-in Pipes:

In your component's template (product-list.component.html), use the uppercase and lowercase pipes to format the product code and name respectively:

<ul> <li *ngFor="let product of products"> Product Code: {{ product.code | lowercase }}<br> Product Name: {{ product.name | uppercase }} <hr> </li> </ul>

include app-product-list in app template before starting server

5.b. Passing Parameters to Pipes

Apply built-in pipes with parameters to display product details.

Angular's built-in pipes allow you to pass parameters to customize their behavior. Let's say you want to display product details with specific formatting using built-in pipes with parameters. Here's an example of how to achieve this:

Assuming you have a component with an array of products in its class:

import { Component } from '@angular/core'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', }) export class ProductListComponent { products = [ { code: 'ABC123', name: 'Sample Product 1', price: 49.99 }, { code: 'XYZ456', name: 'Sample Product 2', price: 79.99 }, // ... other products ]; }

ow, let's say you want to display the product prices with a specific number of decimal places. You can use the number pipe with a parameter for this purpose.

1. Use Built-in Pipes with Parameters:

In your component's template (product-list.component.html), use the number pipe with a parameter to format the product prices:

<ul> <li *ngFor="let product of products"> Product Code: {{ product.code }}<br> Product Name: {{ product.name }}<br> Product Price: {{ product.price | number:'1.2-2':'en-US':'$' }} <hr> </li> </ul>

1.2-2' indicates that there should be at least 1 integer digit, 2 digits after the decimal point, and at most 2 decimal places.

5.c Nested Components Basics

AIM: Load CourseslistComponent in the root component when a user clicks on the View

courses list button.

1. Create the CoursesListComponent:

First, create the CoursesListComponent using the Angular CLI:

ng generate component courses-list

2. Set Up the Root Component:

In your root component's template (app.component.html), you can conditionally display the CoursesListComponent when the user clicks on the "View Courses List" button.

<div> <button (click)="showCoursesList = !showCoursesList"> View Courses List </button> <hr> <app-courses-list *ngIf="showCoursesList"></app-courses-list> </div>

3. Define showCoursesList Property:

In your root component's TypeScript file (app.component.ts), define the showCoursesList property

3. Define showCoursesList Property:

In your root component's TypeScript file (app.component.ts), define the showCoursesList property and the logic to toggle its value based on the button click.

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { showCoursesList: boolean = false; // Flag to show/hide CoursesListComponent }

2. CoursesListComponent Template (courses-list.component.html)

In the courses-list.component.html file, you can display a simple message indicating that the courses list is being shown.

<h2>Courses List</h2>

<p>This is the courses list component.</p>