In this article, we will learn about pipes in angular 4 examples like What are pipes, Parameterized pipes, Custom pipes, Pure and impure pipes, Async pipes
What are the pipes in angular?
In Angular 1.X we used filters to modify (or) format (or) to choose the value within the template. From
Angular >=2.X it is modernized as pipes
- Pipes are used to transforming the data
- We can convert the value of one type to another type
- We can use them as a function
- Pipes makes your code clean and more structured and can execute functions within templates in an effective way
Syntax:
With a single pipes in Angular
syn: Value | pipe1
Multiple pipes in Angular
syn: Value | pipe1 | pipe2 | pipe3 ……..
Parameterized Pipes
syn: Value | pipe1: param1: param2 | pipe2:param1:param2
Here are a few Built-in pipes in Angular Examples.
- DatePipe: Formats a date according to locale rules
- UpperCasePipe: Transforms string to uppercase
- LowerCasePipe: Transforms string to lowercase
- DecimalPiple: Formats a number according to locale rules.
- CurrencyPipe: Formats a number as currency using locale rules.
- PercentPipe: Formats a number as percentage.
- JsonPipe: Converts value into a string using JSON.stringify. Useful for debugging.
- SlicePipe: Creates a new List or String containing a subset (slice) of the elements
Let us see examples for the built-in pipes of angular one by one with examples
DatePipe in Angular
Syn: Value | date: format
Here are the few predefined formats for Date pipe
- ‘medium’: equivalent to ‘yMMMdjms’ (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
- ‘short’: equivalent to ‘yMdjm’ (e.g. 9/3/2010, 12:05 PM for en-US)
- ‘fullDate’: equivalent to ‘yMMMMEEEEd’ (e.g. Friday, September 3, 2010 for en-US)
- ‘longDate’: equivalent to ‘yMMMMd’ (e.g. September 3, 2010 for en-US)
- ‘mediumDate’: equivalent to ‘yMMMd’ (e.g. Sep 3, 2010 for en-US)
- ‘shortDate’: equivalent to ‘yMd’ (e.g. 9/3/2010 for en-US)
- ‘mediumTime’: equivalent to ‘jms’ (e.g. 12:05:08 PM for en-US)
- ‘shortTime’: equivalent to ‘jm’ (e.g. 12:05 PM for en-US)
File: app.component.ts
Create a component, create a variable of type Date
import { Component} from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './template.html' }) export class AppComponent { today = new Date(); }
File: template.html
<h3>date pipe </h3> <p>No pipe: {{today}}</p> <p>No Format: {{today | date}}</p> <p>Format – “dd/MM/yyyy” {{today | date:"dd/MM/yyyy"}}</p> <p>Medium formatted Date: {{today| date:"medium"}}</p> <p>Short Date: {{today| date:"short"}}</p> <p>Full Date: {{today| date:"fullDate"}}</p> <p>Long date: {{today| date:"longDate"}}</p> <p>Medium formatted date: {{today| date:"mediumDate"}}</p> <p>Short date: {{today| date:"shortDate"}}</p> <p>Medium time: {{today| date:"mediumTime"}}</p> <p>Short time: {{today| date:"shortTime"}}</p>
Decimal Pipe in Angular
Syn: Value | number: digitInfo
digitInfo: It’s a string with the following format
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
- minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
- minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
- maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
Create a File: app.component.ts
export class AppComponent { num = 12.12345; }
File: template.ts
<p>No Format: {{num}}</p> <p>Format with 3 digits after decimal (.3-3): {{num | number:'.3-3'}}</p> <p>Format with 5 digits after decimal (.5-5): {{num | number:'.5-5'}}</p> <p>Format with 3 digits before decimal and 10 digits after decimal (3.10-10): {{num | number:'3.10-10'}}</p>
Currency Pipe in Angular
syn: Value | currency: currencyCode: symbolDisplay: digitInfo
• currency code is the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.
• symbol display is a boolean indicating whether to use the currency symbol or code.
1. true: use symbol (e.g. $).
2. false(default): use code (e.g. USD).
• digitInfo is a string as explained in Decimal Filter
Eg: {{emp.salary | currency:'USD':true:'4.2-3'}}
Percentage Pipe in Angular
It converts the number in percentage and also adds the percentage symbol (%) after it.
syn: Value | percent: digitInfo
<p>Formated : {{num | percent}}</p> <p>Formated (3.2-2) : {{num | percent:'3.2-2'}}</p>
Upper and lower case Pipes in Angular
These two pipes doesn’t accept any parameters and the name of the pipe describes its purpose.
Uppercase pipe
Syn: Value | uppercase
Lowercase pipe
syn: Value | lowercase
<p>UpperCase: {{"Hello World" | uppercase}}</p> <p>LowerCase: {{"Hello World" | lowercase}}</p>
Json Pipe in Angular
Normally we can display the object properties in the view but not the entire object, so to display the entire object Json pipe is used.
syn: Value | json
Create file File: app.component.ts
export class AppComponent { employees: Object = [{ EmpName: "Ramesh", EmpSalary: 10000 }, { EmpName: "Suresh", EmpSalary: 11000 }]; }
File: template.html
<h3> Json pipe</h3> <p>{{employees | json}}</p>
Slice Pipe in Angular
This slice works similar to the javascript slicing i.e., Array.prototype.slice()
syn: Value | slice: start: end
File: app.component.ts
export class AppComponent { employees = [{ EmpName: "Ramesh", EmpSalary: 10000 }, { EmpName: "Suresh", EmpSalary: 11000 }]; names = ["Ramesh","Suresh","Lokesh","Durgesh"]; }
File: template.html
<h3>Slice with string</h3> <p>{{"Hello World" | slice :0:5}} {{"Hello World" | slice :6:11}}</p> <h3>slice with array and object</h3> <ul> <li *ngFor="let item of names|slice: 0:1"> <span>{{item}}</span> </li> <li *ngFor="let item of employees|slice: 0:1"> <span>{{item |json}}</span> </li> </ul>
Async Pipe in Angular
- Async pipes unwraps value from an asynchronous primitive or non-primitive. If we have Observable or Promise instance then we can use Async pipe directly with directives like *ngIF, *ngFor, ngSwitch.
- Async pipes subscribes to Observable or Promise and return the latest data.
- When a new value is emitted the Async pipe marks the component to be checked for changes and when the component is destroyed the Async pipe automatically gets unsubscribed to avoid memory leaks.
Let us create a component
@Component({ selector: 'async-pipe', templateUrl: './template.html' }) export class AsyncPipe { firstPromise: Promise<string> = null; isResolve: boolean = false; resolve(): any { if (this.isResolve) { this.isResolve = false; this.firstPromise = new Promise<string>((resolve, reject) => { resolve; }); } else { this.isResolve = true; this.firstPromise = new Promise<string>((resolve, reject) => { resolve("resolved"); }); } } }
File: template.html
<h3>Async Pipe using promise</h3> <p>{{firstPromise | async}}</p> <button (click)="resolve()"> {{isResolve ? 'Reset' :'Resolve'}}</button>
Async pipe with *ngIF *ngFor and ngSwitch
Using *ngIF
export class AsyncPipe { emp = { EmpId: 1, EmpName: "Ramesh", EmpSalary: 10000 }; employee: Promise<Object> = new Promise<Object>((resolve, reject) => { resolve(this.emp); }); }
File: template.html
<p *ngIf="employee |async as emp;else loading">{{emp.EmpId}}. {{emp.EmpName}}</p> <ng-template #loading>Loading...</ng-template>
Using *ngFor
export class AsyncPipe { lstEmployees = [{ EmpId:1,EmpName: "Ramesh", EmpSalary: 10000 }, { EmpId:2,EmpName: "Suresh", EmpSalary: 11000 }]; employees: Promise<Object> = new Promise<Object>((resolve, reject) => { resolve(this.lstEmployees); }); }
File: template.html
<ul> <li *ngFor="let emp of employees|async "> {{emp.EmpId}}. {{emp.EmpName}} </li> </ul>
Using ngSwitch
<div [ngSwitch]="(employee|async)?.EmpId"> <div *ngSwitchCase="1">{{emp.EmpName}}</div> <div *ngSwitchDefault>Hello world !</div> </div>
? the above article we are discussed with builtin pipes in angular 4 examples next article we will see how to implement the custom pipes in angular
- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020
Awesome blog, thanks for the useful information.
Saved as a favorite!, I love your site!
First time visiting your website, I enjoy your site!
This article is truly a nice one it helps new internet users, who are wishing in favor of blogging.
Bookmarked!, I really like your blog!
nice article thanks
after a long time search on the web, I find one new site thk.
I lean from this Article pipes in angular 4 thanks for sharing keep posting more articels
after searching a long time I found a nice article on angular 4 pipes examples from basic I bookmarked your blog keep post more articles thanks
pipes in angular 4 examples concepts I have learned through your blog thanks