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:

Date format pipe example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Date-format-pipe-example-in-angular --style=scss --routing --skip-install

cd Date-format-pipe-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 {

  todayDate : Date = new Date();

}

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

<h1>Date format pipe example in angular</h1>

<p><b>M/d/yy, h:mm a:</b>{{todayDate | date:'short'}}</p>

<p><b>MMM d, y, h:mm:ss a:</b>{{todayDate | date:'medium'}}</p>

<p><b>MMMM d, y, h:mm:ss a z:</b>{{todayDate | date:'long'}}</p>

<p><b>EEEE, MMMM d, y, h:mm:ss a zzzz:</b>{{todayDate | date:'full'}}</p>

<p><b>M/d/yy:</b>{{todayDate | date:'shortDate'}}</p>

<p><b>MMM d, y:</b>{{todayDate | date:'mediumDate'}}</p>

<p><b>MMMM d, y:</b>{{todayDate | date:'longDate'}}</p>

<p><b>EEEE, MMMM d, y:</b>{{todayDate | date:'fullDate'}}</p>

<p><b>h:mm a:</b>{{todayDate | date:'shortTime'}}</p>

<p><b>h:mm:ss a:</b>{{todayDate | date:'mediumTime'}}</p>

<p><b>h:mm:ss a z:</b>{{todayDate | date:'longTime'}}</p>

<p><b>h:mm:ss a zzzz:</b>{{todayDate | date:'fullTime'}}</p>

Output: