Exploring Angular Pipes: Comprehensive Guide
Introduction:
In the Angular framework, angular pipes are one of the important features, that allow us to transform output in your template, One of the most versatile aspects of angular pipes is their ability to handle various types of data manipulations. It allows us to developers transform and format data before displaying it in the template.
In this article, we will learn about different types of angular pipes, along with practical examples to help developers with their functionality and usage in our project.
Angular 16 Pipes
1) Built in pipes in angular 2) Custom Pipes
A)Parameterized Pipes
B)Chaining or Multiple Pipes
1) Built in pipes in angular :
A) Parameterized Pipes
Angular is mostly used predefined by angular called as in-build pipes for filtration of data,
Pipes are defined using the pipe “ | ” symbol.
A) angular pipe Uppercase -
Used for converting your string data to Capital-Uppercase Letters,
Ex. Var_Name:string = "Angualr Think"
<h2>{{ var_name | uppercase }}</h2>
B) angular pipe Lowercase -
Used for converting your srting data Small-lowercase Letters,
Ex. var_name:string="ANGUALR_THINK"
<h2>{{ var_name | Lowercase }}</h2>
C)angular pipe TitleCase -
Used for convert your string in Title or title case,
Ex.var_name:string="ANGUALR_THINK"
<h2>{{ var_name | Titlecase }}</h2>
D) angular pipe currency -
Used for adding your number of different countries for adding their current symbol ,
Ex. var_one:number=1000;
<h2> {{ var_one | currncy:"INR" }} </h2> //etc.EUR ,USD $,INR र
E)angular pipe Slicepipe -
use for slice your string as requird it posible using slice filter,
Ex.var_name:string="ANGUALR_THINK"
<h2>{{ var_one | slice:"1","5" }}</h2>
F)angular pipes Date -
used for adding current dates & times to your application with different formats,
You can use a number of symbols to define a custom format, or you can also use a number of predefined keywords. The available ‘medium’, ‘short’, ‘fullDate’, ‘longDate’, ‘mediumDate’, ‘shortDate’, ‘mediumTime’, and ‘shortTime’etc.
Ex. var_one = new date()
<h2>{{var_one | date:"Fulldate"}}</h2>
<h2>{{var_one | date:"Shortdate"}}</h2>
<h2>{{var_one | date:"Middiumdate"}}</h2>
<h2>{{var_one | date:"DD-MM-YY"}}</h2>
<h2>{{var_one | date:"HH-MM--SS"}}</h2>
G) Async pipe in angular -
The Async pipe automatically subscribes to an Observable or a Promise and returns the emitted values as they come in:
<ul>
<li *ngFor="let item of data | async">
{{ item.name }}
</li>
</ul>
H) Json pipe in angular -
The Json pipe is useful for debugging and displays an object as a JSON string. It uses JSON data display in output,
{{ someObject | json }}
I) Percent pipe :
The Percent pipe transforms a number into its percentage value
{{ decimalValue | percent }}
{{ decimalValue | percent:'3.2-3' }}
The optional argument is a string in the Decimal pipe format.
B)chaining pipes : angular chain pipes -
Angular is defined using “ | ” this pipe symbol It must be used More than one or multiple Pipe used within the same interpolations,
Pipes can be used using the colon(:) symbol to fine-tune the output.
Ex. var_one = new date()
<h2>{{ var_one | date:"Fulldate" | uppercase }}</h2>
2)Custom Pipes:
In the Custom Pipes, Angular also allows you to create as the requirement of developers to develop their own pipe called custom pipes. Start with the @pipe symbol to define their customer pipe, To create a custom pipe, create a new ts file and use the code according to the work you have to do.
You must import Pipe and PipeTransform from Angular/Core.
Custom pipes enable you to implement specific data transform based on your application's requirements for angular pipes. Explore with a practical example:
A) Filter Pipe:
Suppose you have an array of products and want to filter them based on requirements, such as price. You can create a custom pipe called "filter" to achieve this functionality. Here's a sample implementation:
In the app.component.ts file, you can use the custom pipe like this:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(products: Product[], maxPrice: number): Product[] {
return products.filter(product => product.price <= maxPrice);
}
}
In the app.component.html file, you can use the custom pipe like this:
<div *ngFor="let product of products | filter:10 ">
<!-- Display filtered products here -->
</div>
In this example, the custom "filter" pipe filters the product array based on the maximum price of 10.
Pure and Impure pipes in Angular :
In Angular, Pipes are two types I] Pure Pipes II] Impure Pipes
I] Angular pure pipes
Angular pure pipes are the pipes that execute when it detects a pure change in the input value.
The angular pipes are executed only when it detects a change in primitive value or object reference
A single instance is created.
It uses pure function
Pure pipe optimizes application performance.
Let’s see an example,
<div> {{ user | myPipe }} </div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = { name:'Rohit', age: 23};
}
//Here, user is an object and myPipe is a custom Pipe.
II] Impure Pipes :
Impure pipes in angular are the pipes that execute when it detect an impure change in the input value.
The angular pipes are Impure pipes in angular on every change detection cycle irrespective of the change in the input value.
Multiple instances are created
It uses an impure function
Impure pipe may slow down your application
Let’s see an example,
<div> {{ user | myPipe }} </div>
import { Component } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = { name:'Rohit', age: 23};
}
@Pipe({
name: 'myPipe',
pure: false
})
export class MyPipe {
var discount = 15
function calculateAmount(price){
return total + (price - discount);
}
}
Conclusion:
Angular pipes are a powerful tool for transforming and formatting data in your Angular applications. Whether you're utilizing built-in pipes or creating custom ones, pipes easy to filtrate Data using pipes to your application.
With the different types of Angular pipes, such as Date, Number, Uppercase/Lowercase, slice, currency, date, etc., and custom pipes like the Filter pipe, you can efficiently manipulate and display data in your templates.
We can use various Angular pipes and explore the Angular feature to discover an even more easy to user experience.
FAQ
1)What is pipe in TypeScript?
Ans - In TypeScript, a pipe, denoted as the vertical bar ( | ), is used in type annotations to indicate that a variable or expression can have multiple acceptable types. It allows you to define a union type, where a value can be of one of the specified types. For instance, a variable with the type "string | number" can accept either a string or a number as its value. This feature enhances flexibility and type safety in TypeScript programming. read more
2)What is async pipe in Angular?
Ans -The async pipe in Angular is a built-in feature that simplifies the handling of asynchronous data streams, such as promises or observables. It automatically subscribes to the asynchronous data source and manages the subscription, handling the data updates and cleaning up when the component is destroyed.
3)What does pipe () return?
Ans - pipe() in Python returns a pair of file descriptors, (read_fd, write_fd),mostly used for inter-process communication. Data written to write_fd can be read from read_fd. It facilitates data transfer between processes, commonly employed in concurrent programming scenarios to establish communication between parent and child processes.
4)What is pipe in RxJS?
Ans - In RxJS, a pipe is a method used to transform data streams. It allows developers to chain multiple operators together to perform various operations, such as filtering, mapping, and reducing, on observables. In RxJS Pipes facilitate a functional programming style in Reactive Extensions for JavaScript (RxJS) to process asynchronous data flows efficiently.
Read More :
0 Comments