Pipes in Angular
Hello Everyone!
In this article, we are going to know about angular Pipes!
The Pipe is an important element of the Angular framework. When we using a pipe, we can decorate the data as per our needs. The main purpose of using pipes is to transform data within an HTML template. In order to transform data, we use the character |.
The most commonly used built-in pipes are:
- Currency
- Date
- Uppercase
- Lowercase
- JSON
- Decimal
- Percent
- Async
- Slice
Currency Pipe
The currency pipe in angular helps to convert numbers in various currencies.
in app.component.ts
export class AppComponent {
itemPrice: number = 5.50;
}in app.component.html
<div>
<h3> Currency Pipe</h3>
<p>{{ itemPrice | currency:'USD':true }}</p>
<p>{{ itemPrice | currency:'EUR':true }}</p>
<p>{{ itemPrice | currency:'INR' }}</p>
</div>output
Date Pipe
The date pipe in Angular helps to format the Date in Angular
in app.component.ts
export class AppComponent {
birthday = new Date(1993, 8, 10);
}in app.component.html
<div>
<h3> Date Pipe</h3>
<h4>
Siva's birthdate is {{ birthday | date }}
</h4>
</div>output
Uppercase Pipe
Uppercase pipes help to format text to upper case in an Angular app.
in app.component.ts
export class AppComponent {
convertText: string = "I Am Being Managed By Pipes";
}in app.component.html
<div>
<h3>UpperCase Pipe</h3>
<p> {{convertText | uppercase}} </p>
</div>output
Lowercase Pipe
Lowercase pipes help to format text to lower case in an Angular app.
in app.component.ts
export class AppComponent {
convertText: string = "I Am Being Managed By Pipes";
}in app.component.html
<div>
<h3>Lowercase Pipe</h3>
<p> {{convertText | lowercase}} </p>
</div>output
JSON Pipe
The JSON pipe API works to expose an object as a JSON string in the Angular app.
in app.component.ts
export class AppComponent {
address1 = new Address('Dhananjaypur', 'Varanasi', 'India');
}in app.component.html
<h3>JSON Pipe</h3>
<pre> {{address1 | json}} </pre>in address.ts
export class Address {
constructor(public vill:string, public district:string, public country:string) {}
}Output
Decimal Pipe
The Decimal pipe helps to format decimal values in Angular.
in app.component.ts
export class AppComponent {
myNum1: number = 7.4364646;
myNum2: number = 0.9;
}in app.component.html
<div>
<h3>Decimal Pipe</h3>
<p> {{myNum1 | number}} </p>
<p> {{myNum2 | number}} </p>
</div>output
Percent Pipes
The Percent pipe API in Angular modifies a number into its percentage value.
in app.component.ts
export class AppComponent {
numA: number = 0.349;
numB: number = 2.4595;
}in app.component.html
<div>
<h3>Percent Pipe</h3>
<p>A: {{numA | percent}}</p>
<p>B: {{numB | percent:'4.3-5'}}</p>
</div>output
Async Pipes
The Async pipe is considered the best practice when you are getting data in the form of observables. The async pipe subscribes to an Observable/Promise automatically and returns the transmitted values
in app.component.html
<ul>
<li *ngFor="let users of Users | async">
{{ users.name }}
</li>
</ul>Slice Pipes
The Slice pipe API in Angular formulate a subset list or string.
in app.component.html
<ul>
<li *ngFor="let users of Users | slice:2">
{{ users }}
</li>
</ul>Types of Pipe
There are two types of Pipes category in Angular.
1: Pure pipes
Angular executes the pure pipe only when it detects the absolute change to an input value. The pure change is either in the change to the primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
2: Impure pipes
Angular executes the contaminated pipe during every component change detection cycle. The impure pipe is called often, as often as every keystroke or mouse-move.
Conclusion
Here, I have written an article about built-in pipes in angular.
References
