In Angular, Pipes are tools used to transform data display in templates. They are used for operations such as formatting, filtering, sorting, etc. to present data to the user in a more readable or meaningful way.
1. Use Angular’s built-in pipeline:
Let's say we have a component that displays a date, and we want to format this date in a template. We can use the built-in DatePipe pipeline provided by Angular to accomplish this task.
Import Pipe: First, import DatePipe in your component:
import {
Component } from '@angular/core';
import {
DatePipe } from '@angular/common';
To use a pipe in a component: Inject a DatePipe in the component's constructor to use it in the template:
@Component({
selector: 'app-date-example',
template: `
<h2>Formatted Date:</h2>
<p>{
{
currentDate | date:'fullDate' }}</p>
`,
})
export class DateExampleComponent {
currentDate = new Date();
constructor(private datePipe: DatePipe) {
}
}
In the above example, we created a property called currentDate and injected a DatePipe in the constructor. In the template, we use a pipe to format currentDate into full date format.
Using pipes in templates: In templates, apply pipe operations by using pipes in data binding expressions:
<p>{
{
currentDate | date:'fullDate' }}</p>
In the above example, date is the name of the pipe, and 'fullDate' is the parameter of the pipe, used to specify the date format. This will convert currentDate to a string with full date format.
2. Use custom pipelines. Custom pipelines allow you to create reusable data transformation logic to suit specific needs.
- Create a new pipeline: First, create a new pipeline in your Angular project. You can use Angular CLI commands to generate a new pipeline file. For example, execute the following command to create a pipeline named "capitalize":
ng generate pipe capitalize
This will create a file named capitalize.pipe.ts in the src/app directory.
- Implement the conversion logic in the pipeline file: Open the capitalize.pipe.ts file, its content is roughly as follows:
import {
Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
In this example, we create a pipe named CapitalizePipe that implements the PipeTransform interface and defines a transform method to convert the first letter of a string to uppercase.
Using Pipes in Templates: Once you create a custom pipe, you can use it in templates to transform data. Suppose you have a variable name in a component and you want to convert its value to uppercase. Use pipes in the component's template as follows:
<p>{
{
name | capitalize }}</p>
Capitalize here is the name we defined on the pipeline. It will call the transform method of the pipeline and pass the value of name to the pipeline for processing.
This is an example of a simple custom pipeline. You can implement various data transformation logic in pipelines as needed and then use them in templates. It should be noted that custom pipelines are very useful when dealing with data transformation and can help you follow the DRY (Don't Repeat Yourself) principle to better organize and manage your code.
In summary, Angular pipeline is a powerful tool that can be used to perform various transformation and formatting operations on data in templates.