Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:2Length:9 minutes
Angularcoffee400
  • Overview
  • Transcript

1.2 How to Use Angular 2 Pipes

Pipes are very useful for transforming data in Angular 2. In this lesson, I’ll show you some of the most common built-in pipes for formatting data such as currency or dates. Then, I’ll show you how to code your own pipe to truncate string data, complete with a parameter to control the output string length.

Code Snippet:

The following snippet defines a custom pipe to truncate a string.

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
    transform(value: string, chars: number): string {
      let text = `${value.substring(0, chars)}  ...`;
      return text;
    }
}

Then you can use the pipe in a template with {{someString | truncate:50}}.

1.How to Use Angular 2 Pipes
2 lessons, 09:02

Free Lesson
1.1
Introduction
01:15

1.2
How to Use Angular 2 Pipes
07:47


1.2 How to Use Angular 2 Pipes

[MUSIC] Hello everyone. I'm Reggie Dawson. Welcome to the Angular 2 Pipes Coffee Break Course for Tuts+. One of the things I've always liked about Angular is how it handles interaction with data. As long as you provide the data in the form that Angular can handle, it will display it correctly. Under most circumstances, this is fine, but we encounter a few problems when we need to display data that is in a format that doesn't necessarily look good to the end user. In these situations we need a way to transform this data. Fortunately, Angular 2 has a feature called pipes that handles these transformations. A pipe will take whatever data we provide to it and convert it to another format. We can use these pipes in our templates to transform our data. For example, one of the built in pipes of Angular 2, the date pipe, will format our date into something that is more familiar for end users to read. Here we have an Angular component that leverages the date pipe. In this case, we don't have to import anything into the app to get the pipes to work. In our component, we have set a title and a date that will be available in our template. The date is just a standard JavaScript date that we created with the Date.now method. Then in our template, we used the date through interpolation, but we've also added our pipe, separated from the date with the pipe symbol from our keyboard. This passes the date to the pipe to be transformed before it is displayed. If we remove the date pipe and save, then we can see the date how it is formatted when it is returned to us. Then if we add the pipe and save, our date is now formatted in a human-friendly form. Now, beyond the date pipe, Angular 2 comes with some other useful pipes that we can use in our projects. The PercentPipe allows us to format a number as a percentage. We provide the PercentPipe with a decimal number and then we pass this number to our pipe the same way we did with the date. And then after we save and preview, the output is formatted as a percent. Angular 2 also offers the uppercase and lowercase pipes that allow us to format our text quickly. This is useful when you wanna format user input or data returned from a remote API into something that fits the styling of your app better. First, we add a couple of strings to transform and then we add the pipe after the data, the same as we did with the other examples. Then if we preview, the data's transformed to the correct case. As you can probably tell by now, using pipes in your Angular 2 app is not very challenging. Now, there are a few more built-in pipes, but I won't go over each one. And if you want more information, make sure to check out the documentation. Now, when we use these pipes, we can also pass along parameters to control how our pipes display the data we pass to it. The date pipe for example has different parameters that allow you to display the date in various formats. By default, the date is displayed in a medium format, but what if we wanted to display the day of the week in the date? It's as simple as adding the full date parameter to the pipe. We add the parameter after the pipe separated by a colon. Also make sure to wrap the parameter in quotes or it will not work. If we save and preview, we should see the day of the week added to the date. Finding all of the parameters for the date pipe is as simple as looking at the Angular 2 API documentation. This is also where you can go to find out more about the parameters available to other pipes. Now, we can also chain pipes to one another. This allows us to combine pipes to format our data even further. This is as simple as adding an additional pipe using the pipe character. Let's say we wanted our date to be formatted in uppercase. All we have to do is add the pipe to our date. Now if we preview our project, our data's all uppercase. Now, pipes allow us to easily transform data, but there will often be times that we need a pipe that doesn't exist. Fortunately, we can build our own pipes in Angular 2. The first time I felt the need to build a pipe was when I was building a site that returned data from a remote source. I was displaying the data in a list, but I was getting a lot of content of the items I didn't want. Too much text was included with each item. I just wanted to display the snippets of the content in a list. I didn't want to limit the return data, because that could cause numerous data requests from the API, as the data would have to be loaded once we select an item from the list. Instead I created a pipe to truncate the data. To create a custom pipe we have to use the PipeTransform method from Angular 2. The first thing we do in this file is import Pipe and PipeTransform from the angular/core. Then we add the Pipe decorator, which supplies the metadata to our class that lets Angular 2 know this is a Pipe. In the decorator, we add the name that we will reference our Pipe by. After that, we create our class using the implements keyword. This lets Angular know that we are using one of its method in our class, in this case, the PipeTransform method. Think of the PipeTransform method as a utility method that you pass your values into. We use the transform method to take the values we pass into the pipe and return it as something else. The argument we pass into the transform is the value that we pass into our pipe. Since we're using TypeScript, we have added the string type to our argument to specify the value we passed in will be a string. Also if you're wondering, we're also typing the return value of our transform as a string. This is why you see colon and string after the transform. Then we grab 180 characters of text from our value passed into the pipe. We do this using the substring method against the value. Notice that I used a template string for this by wrapping the string in back ticks. By doing this, I can embed my expression in the string. Instead of me trying to concatenate the string using the plus sign, I can add my ellipsis characters alongside my expression. After we extract the text, we return it. That's all we need to configure our pipe. Next we have to import the pipe into our app.module.ts. And then after that, we have to add it to our declarations. This makes the pipe available to all of the components in our app. Now, if we go to our app.component.ts, I've added some dummy text. Again, I've used template strings, this time so I can create a multi line string. Then in the HTML template, we will add our content. We won't add our pipe yet, so this way you can see what it looks like when the full content is displayed. And now we will go back and add our pipe. As you can see now, the content has been truncated and the ellipses added at the end of the text. Since we used the transform method, this pipe will behave like the standard pipes that ship with Angular 2. We could even chain other pipes to ours. If we chain the uppercase pipe to our truncate pipe, it will turn our snippet into uppercase text. We can also add parameters to our custom pipe as well. What if we wanted to grab less characters than the 180 we are currently grabbing? Instead of us hard coding this, we can add it as a parameter. We add a parameter by passing in a second argument to our transform. In this case we are passing in a number which is the amount of characters that we wanna grab. After that, we replace the 180 in our substring with our parameter. After that our pipe will now accept the parameter. If we use the pipe without a parameter, all of our text is returned. Now if we add a parameter with a colon, we should return the number of characters that we specify. And as you can see, the parameter is controlling the number of characters that is returned to our TruncatePipe. That's everything you need to know to get started with pipes and build your own for use in your projects. As you build your Angular 2 apps, you will definitely need to format the data that your app uses. Pipes make it easy to transform this data into a readable format. Thanks for watching the Angular 2 Pipes Coffee Break Course. This has been Reggie Dawson for Tuts+.

Back to the top