Angular Pipes

8. A. AIM: Display the product code in lowercase and product name in uppercase using built-in pipes.

Step-1: Edit the app.component.ts with the following code.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pCode = "AT1001"
  pName = "angular tutorial"
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<p>Product Code :: {{ pCode | lowercase }}</p>
<p>Product Name :: {{ pName | uppercase }}</p>

Step-3

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output:

---

8. B. AIM: Apply built-in pipes with parameters to display product details.

Step-1: Edit the app.component.ts with the following code.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pCode = "AT1001"
  pName = "angular tutorial"
  todayDate = new Date()
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<h3>Product Details</h3>
<p>Product Code :: {{ pCode | lowercase }}</p>
<p>Product Name :: {{ pName | uppercase }}</p>
<p>Manufacturer Date :: {{ todayDate | date:'MMMM, y' }}</p>

Step-3

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output: