All Pipes In Angular 6
Pipe is nothing but just transform data in to required output.Generally Pipe (|) operator is required for perform it. Here you learn all pipes are available in angular 6 with simple example.
- Lowercase pipe
- Uppercase pipe
- Titlecase pipe / Camel case
- Currencypipe
- Jsonpipe
- Percentpipe
- Decimalpipe
- Slicepipe
app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title='Angular 6 Pipe';
today=newDate();
jsonval= {name:'Rebecca', age:'30', address:{a1:'TG', a2:'Hyd'}};
months= ["Jan", "Feb", "Mar", "April", "May", "Jun",
"July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}
|
app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<div style = "width:100%;">
<divstyle = "width:40%;float:left;border:solid 1px black;">
<h2>Uppercase Pipe</h2>
<b>{{title | uppercase}}</b><br/>
<h2>Lowercase Pipe</h2>
<b>{{title | lowercase}}</b>
<h2>titlecase Pipe</h2>
<b>{{title | titlecase}}</b>
<h2>Currency Pipe</h2>
<b>{{6589.23 | currency:"USD"}}</b><br/>
<b>{{6589.23 | currency:"USD":true}}</b>
<h2>Decimal Pipe</h2>
<b>{{ 454.78787814 | number: '3.4-4' }}</b>
// 3 is for main integer, 4 -4 are for integers to be displayed.
<h2>Json Pipe</h2>
<b>{{ jsonval | json }}</b>
<h2>Percent Pipe</h2>
<b>{{00.3456 | percent}}</b>
<h2>Slice Pipe</h2>
<b>{{months | slice:2:6}}</b>
</div>
</div>
|
Output:
Uppercase Pipe
ANGULAR 6 PIPE
Lowercase Pipe
angular 6 pipe
titlecase Pipe
Angular 6 Pipe
Currency Pipe
$6,589.23
$6,589.23
$6,589.23
Decimal Pipe
454.7879 // 3 is for main integer, 4 -4 are for integers to be displayed.
Json Pipe
{ “name”: “Rebecca”, “age”: “30”, “address”: { “a1”: “TG”, “a2”: “Hyd” } }
Percent Pipe
35%
Slice Pipe
Mar,April,May,Jun
0 comments:
Post a Comment