Built-in Pipes example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Built-in-Pipes-example-in-angular --style=scss --routing --skip-install

cd Built-in-Pipes-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

title = 'Built-in Pipes example in angular';  

todaydate = new Date();  

jsonval = {name: 'Adi', age: '29', address:{a1: 'Anantapur', a2: 'AP'}};  

months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',  

  'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];  

}

Open app.component.ts file and update code as below

<h1>Built-in Pipes example in angular</h1>

<h4><u>Uppercase Pipe</u></h4>    

<p>{{title | uppercase}}</p> 

<h4><u>Lowercase Pipe</u></h4>    

<p>{{title | lowercase}}</p>  

<h4><u>Currency Pipe</u></h4>    

<p>{{5889.23 | currency:"USD"}}</p>

<p>{{5889.23 | currency:"USD":true}}</p> 

<h4><u>Date pipe</u></h4>    

<p>{{todaydate | date:'d/M/y'}}</p>

<p>{{todaydate | date:'shortTime'}}</p>  

<h4><u>Decimal Pipe</u></h4>    

<p>{{ 754.98787814 | number: '3.4-4' }}</p>

<h4><u>Json Pipe</u></h4>    

<p>{{ jsonval | json }}</p>  

<h4><u>Percent Pipe</u></h4>    

<p>{{00.84565 | percent}}</p>  

<h4><u>Slice Pipe</u></h4>    

<p>{{months | slice:3:6}}</p>  

Output: