7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.10 Using Pipes in a Template

Pipes are a useful way to filter the data that gets displayed in a template. In this lesson we'll see how to create and make use of a pipe.

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.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.

Back to the top