252. Pure and Impure Pipes (or How to fix the Filter Pipe)

0:01

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

In the last video we created this filter pipe here which allows us to filter

0:06

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

our service for their state and it seems to work great.

0:09

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

We do have a certain issue with it though.

0:13

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

If we allow the user to add a new server and

0:17

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

I will quickly add this functionality by going to my template and by

0:22

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

adding a line break and then a button with the classes button

0:26

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

and button primary.

0:28

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

where I say add server,

0:30

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

which will execute a new method on

0:35

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

add server like this.

0:37

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And then in the app component,

0:39

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

I will quickly add this method on add server.

0:42

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And here I will simply take my servers,

0:45

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

push a new server on it.

0:47

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And of course,

0:48

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this will just be a generic server here,

0:50

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

which will have the instance type of,

0:53

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

let's say,

0:54

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

small.

0:55

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

a name of new server.

0:58

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

Let's keep it super simple here.

1:00

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

A status of stable and started

1:04

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

could be new date and then the same date as all the other

1:08

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

service here.

1:09

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

This is not the recording date as a side note,

1:11

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

just like or how the way you want it.

1:14

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So with this,

1:15

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

we are able to add a new server.

1:18

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And if I now click on Add Server,

1:19

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

you see it's getting added here.

1:21

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

If I filter for Stable,

1:23

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

though, and I hit this button,

1:24

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

you don't see it getting added here.

1:27

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

But it is there.

1:28

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

You can see if I remove the filter altogether.

1:31

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So I added a couple of servers,

1:33

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

and now we can filter for them again.

1:35

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

But they weren't added whilst we had this list filtered.

1:39

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And this is actually not a bug.

1:43

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

I'll quickly reload this and filter for stable again so that we can see this.

1:47

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

If I hit enter here,

1:49

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

as mentioned,

1:50

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

it's not getting added,

1:51

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

but it's there.

1:52

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

We can see as soon as we clear our filter.

1:54

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

Now,

1:55

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

the reason for this behavior is that Angular is,

1:58

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

thankfully,

1:59

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

I should say,

2:00

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

not rerunning our pipe on the data whenever this

2:04

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

data changes.

2:05

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So as soon as we change what we enter here,

2:09

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

and even if we would only add

2:12

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

a blank space and then remove it,

2:14

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

we would update our pipe again,

2:17

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

as you can see.

2:17

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So adding the input or,

2:19

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

excuse me, changing the input of the pipe will trigger a recalculation,

2:24

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

will trigger the pipe being applied to the data again.

2:28

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

But changing the data won't trigger this.

2:31

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And this is a good behavior because otherwise Angular would

2:35

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

have to run this pipe or rerun this pipe whenever any

2:39

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

data on the page changes.

2:41

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this would be really bad because that would cost a lot of performance and

2:45

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this is also the reason why no built -in filter pipe exists

2:50

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

because filtering you would say is pretty a pretty common task

2:54

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

but the angular team decided against adding such a pipe because you typically

2:59

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

have a high performance cost if you want to enforce it

3:03

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

being updated even if you are in filter mode

3:06

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So by default it doesn't work here but we can force it to work but

3:10

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

again be aware that the following change will

3:14

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

make sure that whenever we change data on the page our

3:18

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

pipe is recalculated you could say.

3:22

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So this might lead to performance issues so you should know

3:26

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

what you're doing which is why I'm really emphasizing this.

3:28

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

You can force

3:30

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this pipe to be updated whenever the data changes by adding a

3:34

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

second property to the pipe decorator.

3:36

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

It's called pure and you can set it to

3:40

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

False.

3:40

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

By default,

3:42

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this is true and doesn't need to be added.

3:44

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

Now if you do this and the app reloads,

3:47

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

let's filter for stable servers and add new servers.

3:51

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And now you see they get added here too.

3:53

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

The reason simply is that the pipe now gets recalculated

3:57

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

whenever data changes.

3:58

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And as mentioned before,

4:00

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this can lead to performance issues,

4:02

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

but might be what you're interested in.

4:04

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

So it is fine to use it.

4:05

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

This is what this

4:07

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

pure properties therefore you can set it to false which basically means

4:11

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

this is not you could say purely focusing on whether

4:15

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

the pipe arguments changed but now it will also be recalculated

4:19

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

whenever anything changes on the page and again this might be a

4:23

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

bad behavior i'm just emphasizing this because it's so important to understand but

4:28

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

if you know what you're doing if you do need this behavior definitely go ahead set

4:32

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

pure to false and you are good to go

4:35

S… Speaker 2 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

And with that,

4:36

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

we now get a working filter pipe with this little downside of potentially hitting

4:40

S… Speaker 1 (252. Pure and Impure Pipes (or How to fix the Filter Pipe))

performance issues if we have a very long list here.

252. Pure and Impure Pipes (or How to fix the Filter Pipe)

Resume

Konbyen tan pou m' fè transkript la?