4.11 Using Pipes in a Class

Hi folks, in this lesson we're going to see how we can use a Pipe in pure code rather than in a template. Pipes are typically used to filter data or format data to be displayed in a view. Pipes however also have the ability to be used in pure code outside of a template and occasionally you might find the need to do that as we do with the example app that we're building. So the pipe that we created in the last lesson can be used to filter out the face cards, at the moment the home component is responsible for creating the deck of cards, so this could be a good place for us to apply the pipe. Let's get the home component opened up. And let's import the pipe at the top of the file first. So now let's add a new property to the class for the pipe. So now down in the ngOnInit, we can initialize our pipe. The way the pipes work is that the transform method of the pipe needs to be called but in order to call that method we need an instance of the pipe. The method isn't static, so we have to new up an instance and we can then call the transfer method of the pipe. So now let's just move the initialization of the deck down pass the player and the pipe initialization. And let's use our pipe before we do any shuffling or dealing. So as we know the pipe exposes a transform method as per the pipe transform interface let's just open up the pipe again. So the pipe class implements the pipe transform interface and the pipe transform interface dictates that the class must have a transform method and as you can see our pipe does have this method. And that's what we're invoking when we call the transform method on this line here. Once we've created the deck, the deck will have a property called cards and that will be an array of card objects and that's what we pass into the transformed method is the first argument and we can just hard code the easy mode argument to true for now. And the pipe will return an array of cards and we save that back to the cards property of the deck. So now lets go back to the browser. And it looks like the hand array is still empty We're gonna need to move the player creation back into the ngOnInit for now. So, let's try that again. Okay, so this time we have cards but no face cards and let's just refresh a few times let me just make sure we don't see any face cards. So we do see an Ace there but by default Aces are low so now let's pass false to the pipe, instead of true. We should now see a face card it might not happen straight away, so we might need to just refresh a few times. So I'm not sure what the odds of getting a face card are and there we go, so the pipe is clearly working. And as you can see a pipe is just like a regular JavaScript class, if we want to use it in code instead of in a template we can just create a new instance of it invoke the transform method and pass it the required arguments. So hardcoding the easy mode value is a bit lame, what about if we add a new check box to the start component so that the player can choose whether to have easy mode enabled or not. We won't wire it up and get it fully working today we'll come back and do this a bit later in the course but we can at least add the mark up to the template and get a few things in place. So let's open up the template for the start component first of all. And let's add a new row for the easy mode check box. And I've copied that to save time so let's make some changes. And it looks like we've got some copy paste errors from earlier, so. And we better update the label as well. So let's add the new constant. And now in the start component class we can add the easy mode property and the toggle mode method. So I've added that one directly after aces high because it's also a Boolean, and it's nice to keep those properties grouped by type. And the toggle mode will be very similar to toggle aces but it will refer to the easy mode property instead of the aces high property. This toggle mode method is exactly the same almost as the toggle aces, all it does is flip the value of the easy mode property. So if easy mode is false when we call the toggle mode method easy mode will become true or if easy mode is already true when we call the toggle mode method easy mode will become false. So let's go back to the browser now. And we should find that we have two check boxes now one for aces high and one for easy mode and we can click to enable that or click again to disable it. So the only part that's wired up at the moment is the custom check box and the property but we're not actually doing anything with those values yet but we will come back and do something with those later on in the course. So in this lesson we saw how we can use a pipe purely in code instead of using it in a template. Using pipes in templates is incredibly common probably more common that using them in code but they are flexible enough that we can use them in either place depending on the needs of the application that we're building. We learn that to use a pipe in a class, we just need to import the pipe as we would any other module and we then need to create a new instance of it. Once we've done this, we can then invoke the transform method of the pipe in order to filter or format the required data. Thanks for watching.