Member-only story

Pipes in Angular

Sumit kumar Singh
4 min readMar 6, 2023

In Angular, pipes are used to transform data in templates before they are displayed to the user. They are similar to filters in AngularJS and can be used for a variety of tasks, such as formatting numbers and dates, filtering and sorting lists, and more.

Here’s an example of how to use a pipe to format a date in an Angular template:

  1. Create a new Angular project using the Angular CLI:
ng new my-app

2 . Open the app.component.ts file and add a date property to the component:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<p>Today is {{ date | date: 'longDate' }}</p>
`,
})
export class AppComponent {
date = new Date();
}

3. In the template, use the date pipe to format the date property in the desired format. In this case, we're using the longDate format.

4. Run the app with ng serve and you should see the formatted date in the browser.

In this example, we’re using the date pipe to format the current date as a long date string. The pipe takes two arguments: the value to be transformed (in this case, the date property), and the format string to use.

Here are some examples of built-in pipes and how to use them:

  1. upperCasePipe: Converts a…

--

--

Sumit kumar Singh
Sumit kumar Singh

Written by Sumit kumar Singh

YouTube: https://shorturl.at/8zZ4B Topmate: https://topmate.io/sumit_kr_singh 📚 HTML, Angular, React, and JavaScript 🧑‍💻 Tips & tricks

No responses yet