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:
- 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:
- upperCasePipe: Converts a…