4.10 Using Pipes in a Template

Hi folks. In this lesson we're going to look at pipes. If you use the original AngularJS, pipes are just an updated version with filters. If you didn't use any previous version of Angular, a pipe is a way to filter the data that is driving the view, like if you're using an ng4 to create a list of products, a pipe can filter that list and only show items if they meet some criteria. They're called pipes because of the syntax that we use in the template as you'll see shortly. So pipes are a bit like mini components. They have a decorator but they don't have a template or any styling. They're basically just a little unit of functionality that can filter data. We can use the CLI to create one for us. Let's say we want to be able to filter the cards in a player's hand. Let's create a face pipe which can filter out any face cards like kings or queens out of the player's hand. So the CLI will create the pipe class file for us, and it will create a spec file for us, and it will also update the module for us. And the CLI has done the thing where it names the folder incorrectly. Let's just fix that briefly. And here we have the basis for our pipe. So when the CLI added the new pipe to the module for us, it would have done that using the wrong name. So we just need to fix that as well. And you can see that the face cards pipe has been added as a declaration with the rest of the components. So a pipe really is just like a mini component with no templates and no styling. So let's just take a quick look at what we get in the skeleton of the pipe. We get a couple of things imported for us, the pipe decorator and the pipe transform interface, which the pipe class implements. To satisfy this interface, the class must provide a transform method, which has also been added for us. When the pipe is in use, Angular will call this method of the pipe and pass it the data to filter as the first argument. And then any additional arguments, as the second arguments. The pipe is pretty flexible by default, each parameter is of the any type, and it also returns the any type. So we can basically do whatever we want in here. What else happens? Well, the decorator for this type of thing in Angular is pretty straightforward. We just provide the name of the pipe, which is what we'll refer to from our template. So, let's just make some changes. We're going to use this pipe in the template for the game component where we display the player's hand. So the data that the pipe will be passed will be this array of cards. So the first argument has been renamed cards and it will be an array of card objects. And you can see straight away that this file doesn't know what a card object is so we better import our card model. We will also want our method to return an array of cards. So now inside the transform method, we're going to want to iterate the array of cards and check each card individually. If the card is a face card, it will have a value of either 10 or if aces are high perhaps 11. We'll want to filter the array so that it contains only cards with a value of less than ten. Great, that ought to do it. We use the filter method, the arrow function will be invoked for each item in the array. And will be passed the item, which will be a card, from the current invocation. We can return true if the value is less than 10, or false otherwise. So now we can go to the game component and implement the pipe. So we do this in the expression for the ngFor directive and we can just add it to the end. We use the pipe symbol at the end of the existing expression and this is why pipes are called pipes. And then we specify the name of the pipe, which in this case is faceCards. Any additional arguments can then be passed to the pipe using a colon and then the name of the item that we'd like to parse in as an argument. This time we're going to be parsing in easy mode. And that will either be true or false, depending on whether the player has chosen to start the game in easy mode or not. So we don't have this property easy mode yet. Let's go to the game component and add that. And we can just hard code that to true for now. And let's go back to the pipe and just update the argument there also. So if easy mode is false, then we don't want to filter any cards, so we can just return the existing array of cards So, let's make sure all the files are saved, and let's go back to the browser and take a look. So we should find that we have a slight issue. If the player is dealt any face cards, the filter will remove them, but it won't replace them with non-face cards. So the player could have only one card, or no cards at all, such as we can see here. The problem is that we're applying the filter too late. In this particular case, the template is the wrong place for the pipe, although that's not usually the case. It's just the specific requirements of the example application. Luckily for us though, we can also use pipes in pure code as well as in templates. So we'll revisit this pipe in another lesson. For now, let's take the pipe back out of the component. So in this lesson we looked at pipes, and we saw that they are useful classes that we can use to filter the data that gets displayed in a template. We used the custom pipe in this lesson in conjunction with an NgFor directive, but we don't have to use them with NgFor. We can use them with other parts of our templates as well. As well as custom pipes, Angular also has a number of built in pipes for filtering or otherwise formatting data, such as the decimal pipe, the currency pipe, and the date pipe. Thanks for watching.