- Overview
- Transcript
4.11 Using Pipes in a Class
Following on from the last lesson, in this lesson we'll see how we can use pipes in code instead of in a template.
1.Introduction6 lessons, 42:00
1.1Introduction00:48
1.2Get Started With Angular-CLI11:09
1.3Developing With Angular-CLI13:17
1.4TypeScript vs. JavaScript06:54
1.5Angular Modules From the CLI04:31
1.6CLI Options05:21
2.Get Started With Angular7 lessons, 42:38
2.1Bootstrapping the Application04:30
2.2The Application Module04:15
2.3The Application Component08:06
2.4Component Styling03:06
2.5Global Styling05:11
2.6Creating a Component With the CLI09:34
2.7Creating a Service With the CLI07:56
3.Core Concepts7 lessons, 55:20
3.1Component Trees06:20
3.2Dependency Injection06:52
3.3Content Projection05:38
3.4Component and Directive Lifecycle Methods06:31
3.5Component-Only Lifecycle Methods05:28
3.6Decorators07:36
3.7Models16:55
4.Template Deep Dive11 lessons, 1:10:56
4.1Basic Data Binding With Interpolation05:35
4.2Property Bindings07:07
4.3Attribute Bindings03:29
4.4Event Bindings08:16
4.5Class and Style Bindings05:44
4.6The `NgClass` and `NgStyle` Directives05:04
4.7The `*ngIf` Directive04:41
4.8The `*ngFor` Directive09:29
4.9Inputs05:33
4.10Using Pipes in a Template07:31
4.11Using Pipes in a Class08:27
5.Forms10 lessons, 1:45:41
5.1Handling User Input With Template Reference Variables07:06
5.2Template-Driven Forms11:10
5.3Template-Driven Forms: Validation and Submission14:00
5.4Reactive Forms11:26
5.5Using a `FormBuilder`08:01
5.6Reactive Validation With Built-in Validators14:53
5.7Creating Custom Validators for Template-Driven Forms12:18
5.8Creating Custom Validators for Reactive Forms08:26
5.9Observing Form State Changes12:40
5.10Working With the `@HostListener` Decorator05:41
6.Routing9 lessons, 1:15:10
6.1Defining and Configuring Routes07:53
6.2Rendering Components With Router Outlets10:14
6.3Using Router Links for Navigation05:25
6.4Navigating Routes Using the Router06:24
6.5Determining the Active Route Using an Activated Route07:16
6.6Working With Route Parameters10:42
6.7Using Route Guards07:36
6.8Observing Router Events10:55
6.9Adding Child Routes08:45
7.Using the HTTP Client5 lessons, 56:24
7.1Sending an HTTP Request10:52
7.2Handling an HTTP Response11:22
7.3Setting Request Headers12:33
7.4Intercepting Requests09:04
7.5Finishing the Example Application12:33
8.Testing10 lessons, 1:23:27
8.1Service Unit Test Preparation10:45
8.2Unit Testing Services13:24
8.3Component Unit Test Preparation12:35
8.4Unit Testing Components07:27
8.5Unit Testing Component Templates06:58
8.6Unit Testing Pipes04:41
8.7Unit Testing Directives04:56
8.8Unit Testing Validators04:48
8.9Unit Testing Observables11:37
8.10Unit Testing HTTP Interceptors06:16
9.Building for Production1 lesson, 03:40
9.1Building for Production03:40
10.Conclusion1 lesson, 01:32
10.1Conclusion01:32
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.