Using Angular pipes

Angular pipes are crucial for Angular application. Angular pipes are also widely used in Angular application.

Angular pipe takes in data as input and transforms it to a desired output. In this page, you’ll use pipes to transform a component’s birthday property into a human-friendly date.
src/app/hero-birthday1.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-hero-birthday’,
template: `<p>The hero’s birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
}

Focus on the component’s template.
src/app/app.component.html

<p>The hero’s birthday is {{ birthday | date }}</p>

Inside the interpolation expression, you flow the component’s birthday value through the pipe operator ( | ) to the Date pipe function on the right. All pipes work this way.

Angular Pipes

First lets look at a simple pipe built into Angular the date pipe. The date pipe simply formats our date in our templates.

<p>{{date | date:’shortDate’}}</p>

<p>{{date | date:’longDate’}}</p>

The date Wed Jan 20 2016 22:01:58 GMT-0600 (Central Standard Time) would be formated to 1/20/2016 and January 20, 2016.
Custom Pipes

Now lets build our own custom pipe. In our use case we get dynamic content from an API. We would like the content to be shortened if it is past a certain length and add an ellipsis at the end. So our example would take a 100 character string down to 50 characters with an ellipsis at the end. Lets look at what our template using our pipe would look like.

<p>{{longText | ellipsis:50 }}</p>

In our template the pipe takes in a parameter of how long we would like the text to be. Next we can look into our ellipsis pipe.

import { Pipe } from ‘@angular/core’;

@Pipe({
name: ‘ellipsis’
})
export class EllipsisPipe {
transform(val, args) {
if (args === undefined) {
return val;
}

if (val.length > args) {
return val.substring(0, args) + ‘…’;
} else {
return val;
}
}
}

First we import the Pipe decorator from Angular core. This decorator allows us to add metadata to describe our Class and how it should behave. For our pipe we only have a name property in our decorator. This simply tells Angular what name to look for in our templates. Next our Class has a method called transform. This method is called by Angular to get the result of our pipe. The transform method take two parameters, first the value that is being formated or piped in and the second a list of parameters/ arguments passed into our pipe.

In the method we check if there was anything passed in. If no length was defined we just return back the string. The second statement takes the string and trims of extra characters and adds the ellipsis. Next take a look at our AppModule imports and registers the pipe.

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page