What is an Angular pipe?
An Angular pipe is simply a function that takes in data as input, performs some transformation on that data, and returns the transformed data. Pipes are used to format, sort, and filter data in our application's template.
Built-in Angular pipes
Angular provides a wide range of built-in pipes that make it easy to transform data in your Angular application, such as the DatePipe, which is used to format dates in different formats, such as long, short, medium, and full.
Below is a list of some of the built-in Angular pipes:
DatePipe: This is used to format dates in different formats, such asshort,medium,long, andfull.CurrencyPipe: This is used to format currency values in different formats and currencies.PercentPipe: This is used to format numbers as percentages.LowerCasePipe: This is used to convert a string to lowercase.UpperCasePipe: This is used to convert a string to uppercase.JsonPipe: This is used to format JSON objects.SlicePipe: This is used to slice an array or a string and return a new array or string containing the selected elements.AsyncPipe: This is used to subscribe to and retrieve data from asynchronous sources, such as HTTP requests.DecimalPipe: This is used to format numbers with a specific number of decimal places.KeyValuePipe: This is used to iterate over the properties of an object and return key-value pairs as an array.
How to use an Angular pipe
We can use any of the Angular pipes by adding it to the expression we want to modify in our component's template, using the | (pipe) symbol.
{{<variable> | <Angular pipeline>}}
Let's see an example of how to use Angular pipes in an Angular application.
Code example 1
Below, we'll use the built-in UpperCasePipe to transform our text to all uppercase letters.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Code explanation
In the
app.component.tsfile,Lines 9–11: We define two text variables
titleandplatform. We give two variables, values of"learnangularpipe"and"educative.io", respectively.
In the
app.component.htmlfile,Lines 1–2: We displayed the variables on the webpage by binding them to the HTML elements.The
titleis the variable name, anduppercaseis the built-in Angular pipe. We use the uppercase pipe to transform the text to all uppercase letters. So, when the webpage loads, the values oftitleandplatformare displayed in uppercase letters.
Code example 2
Let's take a look at another example of how to use Angular Pipes. This time, we'll focus on using the built-in DatePipe to transform date values in Angular.
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Welcome to angular!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
Code explanation
In the
app.component.tsfile,Lines 9–11: We declare three variables
April,June, andJuly. We give three different date values to three variables.
In the
app.component.htmlfile,Lines 1–3: We transform the dates using the built-in Angular DatePipe. We can use the built-in DatePipe to transform dates into any format we want.
In conclusion, Angular pipes are extremely important when building an Angular application. It helps to format our data easily without writing too much code in our component's TypeScript file.
