FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01: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.

Back to the top