251. Example Creating a Filter Pipe

Jul 21, 2026 05:03 · 7:01 · English · Whisper Turbo · 1 ஒலிப்பேழைகள்

இந்த நகல் காலாவதியாகும் 7 நாட்கள். நிலையான சேமிப்புக்காக மேம்படுத்தல் →

0:02

S… Speaker 1 (251. Example Creating a Filter Pipe)

In the last lecture,

0:03

S… Speaker 1 (251. Example Creating a Filter Pipe)

we created our own pipe and we also allowed the user to pass a parameter.

0:07

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now I want to create another new pipe because I want to

0:12

S… Speaker 1 (251. Example Creating a Filter Pipe)

show you something which might look strange at the

0:16

S… Speaker 1 (251. Example Creating a Filter Pipe)

beginning.

0:16

S… Speaker 1 (251. Example Creating a Filter Pipe)

Let's add a new element here above

0:20

S… Speaker 1 (251. Example Creating a Filter Pipe)

our unordered list and this should be an input field.

0:24

S… Speaker 1 (251. Example Creating a Filter Pipe)

So input of type text.

0:26

S… Speaker 1 (251. Example Creating a Filter Pipe)

I want to allow the user to filter our service.

0:30

S… Speaker 1 (251. Example Creating a Filter Pipe)

For example,

0:30

S… Speaker 1 (251. Example Creating a Filter Pipe)

by status.

0:31

S… Speaker 1 (251. Example Creating a Filter Pipe)

So that once you type stable in there,

0:33

S… Speaker 1 (251. Example Creating a Filter Pipe)

you only see service with the status stable.

0:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

So therefore,

0:38

S… Speaker 1 (251. Example Creating a Filter Pipe)

I need this input text field.

0:40

S… Speaker 1 (251. Example Creating a Filter Pipe)

And I want to use two -way data binding to bind it.

0:44

S… Speaker 1 (251. Example Creating a Filter Pipe)

So ng model and bind this to filtered

0:49

S… Speaker 1 (251. Example Creating a Filter Pipe)

status,

0:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

for example.

0:52

S… Speaker 1 (251. Example Creating a Filter Pipe)

This of course would be a new property I set up here in

0:56

S… Speaker 1 (251. Example Creating a Filter Pipe)

my component.

0:57

S… Speaker 1 (251. Example Creating a Filter Pipe)

So below all my servers,

0:59

S… Speaker 1 (251. Example Creating a Filter Pipe)

I have filtered status,

1:01

S… Speaker 1 (251. Example Creating a Filter Pipe)

which is an empty string at the beginning,

1:04

S… Speaker 1 (251. Example Creating a Filter Pipe)

filtered status like this.

1:06

S… Speaker 1 (251. Example Creating a Filter Pipe)

So if we save this,

1:08

S… Speaker 1 (251. Example Creating a Filter Pipe)

we should see this new input field here at the top.

1:11

S… Speaker 1 (251. Example Creating a Filter Pipe)

Let's maybe add a horizontal line below it just for styling reasons.

1:16

S… Speaker 1 (251. Example Creating a Filter Pipe)

And with that,

1:17

S… Speaker 1 (251. Example Creating a Filter Pipe)

we can enter something here.

1:18

S… Speaker 1 (251. Example Creating a Filter Pipe)

But of course,

1:19

S… Speaker 1 (251. Example Creating a Filter Pipe)

this does not do anything.

1:20

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now, I want to build a pipe,

1:22

S… Speaker 1 (251. Example Creating a Filter Pipe)

which I can apply to this list somehow,

1:25

S… Speaker 1 (251. Example Creating a Filter Pipe)

which allows me to then only view the servers,

1:29

S… Speaker 1 (251. Example Creating a Filter Pipe)

which do indeed fulfill the requirements here.

1:32

S… Speaker 1 (251. Example Creating a Filter Pipe)

So to do this,

1:34

S… Speaker 1 (251. Example Creating a Filter Pipe)

I will add a new pipe here.

1:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

And for this,

1:38

S… Speaker 1 (251. Example Creating a Filter Pipe)

I will now use the CLI.

1:39

S… Speaker 1 (251. Example Creating a Filter Pipe)

So ng.

1:41

S… Speaker 1 (251. Example Creating a Filter Pipe)

generate pipe would be shortcut here or just g

1:46

S… Speaker 1 (251. Example Creating a Filter Pipe)

p and then the name of your pipe and I will name it filter filter

1:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

pipe so by typing filter this gives me also a testing file

1:54

S… Speaker 1 (251. Example Creating a Filter Pipe)

which I don't need but then the filter pipe here and there you can see it also

1:58

S… Speaker 1 (251. Example Creating a Filter Pipe)

pre -populates the name here in my add pipe decorator and

2:03

S… Speaker 1 (251. Example Creating a Filter Pipe)

it gives me this interface and well gives me this transform method

2:07

S… Speaker 1 (251. Example Creating a Filter Pipe)

in its most basic form

2:09

S… Speaker 1 (251. Example Creating a Filter Pipe)

So in here,

2:10

S… Speaker 1 (251. Example Creating a Filter Pipe)

I want to allow the user to filter,

2:12

S… Speaker 1 (251. Example Creating a Filter Pipe)

and I will indeed get an argument,

2:14

S… Speaker 1 (251. Example Creating a Filter Pipe)

the first argument of this list of arguments,

2:17

S… Speaker 1 (251. Example Creating a Filter Pipe)

and this will be what the user entered.

2:19

S… Speaker 1 (251. Example Creating a Filter Pipe)

So the filter string,

2:21

S… Speaker 1 (251. Example Creating a Filter Pipe)

you could say,

2:22

S… Speaker 1 (251. Example Creating a Filter Pipe)

and this will be a string.

2:24

S… Speaker 1 (251. Example Creating a Filter Pipe)

Well, and then here I want to implement some logic which allows me to only

2:28

S… Speaker 1 (251. Example Creating a Filter Pipe)

return the elements of the array which fulfill this Argument

2:33

S… Speaker 1 (251. Example Creating a Filter Pipe)

or which fulfill this filter string here where the status of the server

2:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

matches this filter string to be precise for this

2:41

S… Speaker 1 (251. Example Creating a Filter Pipe)

I will first of all check if value .length and value will

2:45

S… Speaker 1 (251. Example Creating a Filter Pipe)

here be the array of service.

2:46

S… Speaker 1 (251. Example Creating a Filter Pipe)

It doesn't have to be a string.

2:48

S… Speaker 1 (251. Example Creating a Filter Pipe)

This is the first important takeaway.

2:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

It can also be an array here.

2:51

S… Speaker 1 (251. Example Creating a Filter Pipe)

It can be any data you output in the end.

2:54

S… Speaker 1 (251. Example Creating a Filter Pipe)

So here I want to check if the value length is zero.

2:58

S… Speaker 1 (251. Example Creating a Filter Pipe)

So if it's empty.

2:59

S… Speaker 1 (251. Example Creating a Filter Pipe)

In which case I will just return value.

3:01

S… Speaker 1 (251. Example Creating a Filter Pipe)

So I will basically just quit.

3:03

S… Speaker 1 (251. Example Creating a Filter Pipe)

There is nothing to display.

3:05

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now after checking this the interesting part happens here.

3:09

S… Speaker 1 (251. Example Creating a Filter Pipe)

I simply want to check or I want to loop for all

3:13

S… Speaker 1 (251. Example Creating a Filter Pipe)

my items in my value and Value here

3:17

S… Speaker 1 (251. Example Creating a Filter Pipe)

will be an array keep this in mind and then I want to check if

3:21

S… Speaker 1 (251. Example Creating a Filter Pipe)

my status of each Server matches

3:25

S… Speaker 1 (251. Example Creating a Filter Pipe)

the filter string up here

3:28

S… Speaker 1 (251. Example Creating a Filter Pipe)

So for this,

3:29

S… Speaker 1 (251. Example Creating a Filter Pipe)

I can simply check if item .status.

3:31

S… Speaker 1 (251. Example Creating a Filter Pipe)

And of course,

3:32

S… Speaker 1 (251. Example Creating a Filter Pipe)

you could write this more generic and pass the to be filtered property here

3:36

S… Speaker 1 (251. Example Creating a Filter Pipe)

as a second argument,

3:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

like prop name,

3:39

S… Speaker 1 (251. Example Creating a Filter Pipe)

which is a string.

3:41

S… Speaker 1 (251. Example Creating a Filter Pipe)

And then you could simply say item prop name in square

3:46

S… Speaker 1 (251. Example Creating a Filter Pipe)

brackets.

3:46

S… Speaker 1 (251. Example Creating a Filter Pipe)

So if this equals.

3:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

my filter string.

3:51

S… Speaker 1 (251. Example Creating a Filter Pipe)

Only if this is equal,

3:53

S… Speaker 1 (251. Example Creating a Filter Pipe)

only in this case,

3:55

S… Speaker 1 (251. Example Creating a Filter Pipe)

I want to return it.

3:57

S… Speaker 1 (251. Example Creating a Filter Pipe)

So I should add a new result array.

4:00

S… Speaker 1 (251. Example Creating a Filter Pipe)

This is an array I will use temporarily here.

4:02

S… Speaker 1 (251. Example Creating a Filter Pipe)

And I will push new items on this result array.

4:06

S… Speaker 1 (251. Example Creating a Filter Pipe)

So I will push any items on this array which fulfill my

4:10

S… Speaker 1 (251. Example Creating a Filter Pipe)

criteria here,

4:11

S… Speaker 1 (251. Example Creating a Filter Pipe)

which are or which have a status or a prop name in general.

4:15

S… Speaker 1 (251. Example Creating a Filter Pipe)

equal to my filter string.

4:17

S… Speaker 1 (251. Example Creating a Filter Pipe)

So here I will then push item on this array and return this

4:21

S… Speaker 1 (251. Example Creating a Filter Pipe)

result array in the end.

4:22

S… Speaker 1 (251. Example Creating a Filter Pipe)

And therefore,

4:22

S… Speaker 1 (251. Example Creating a Filter Pipe)

this result array will only hold the items where the

4:26

S… Speaker 1 (251. Example Creating a Filter Pipe)

prop name I pass as a second argument here,

4:29

S… Speaker 1 (251. Example Creating a Filter Pipe)

or as a third argument actually,

4:31

S… Speaker 1 (251. Example Creating a Filter Pipe)

where this prop name or this value of the prop name is actually equal

4:35

S… Speaker 1 (251. Example Creating a Filter Pipe)

to my filter string.

4:36

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now with this,

4:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

the pipe is finished.

4:38

S… Speaker 1 (251. Example Creating a Filter Pipe)

You have to make sure that it has been added to app module.

4:41

S… Speaker 1 (251. Example Creating a Filter Pipe)

DCLI did this automatically here for me.

4:44

S… Speaker 1 (251. Example Creating a Filter Pipe)

If you created it manually,

4:45

S… Speaker 1 (251. Example Creating a Filter Pipe)

make sure that you add filter pipe to declarations and add your import

4:49

S… Speaker 1 (251. Example Creating a Filter Pipe)

at the top.

4:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

And then in the app component,

4:52

S… Speaker 1 (251. Example Creating a Filter Pipe)

we apply it here in the ng4 loop.

4:56

S… Speaker 1 (251. Example Creating a Filter Pipe)

And this might sound strange because before we only used it in string

5:00

S… Speaker 1 (251. Example Creating a Filter Pipe)

interpolation.

5:01

S… Speaker 1 (251. Example Creating a Filter Pipe)

But keep in mind that I said at the beginning of this module that pipes transform

5:05

S… Speaker 1 (251. Example Creating a Filter Pipe)

your output.

5:06

S… Speaker 1 (251. Example Creating a Filter Pipe)

And the ng4 loop is simply part of your output.

5:09

S… Speaker 1 (251. Example Creating a Filter Pipe)

Therefore, of course,

5:10

S… Speaker 1 (251. Example Creating a Filter Pipe)

you can add a pipe here too to my servers.

5:13

S… Speaker 1 (251. Example Creating a Filter Pipe)

And then I simply say filter.

5:17

S… Speaker 1 (251. Example Creating a Filter Pipe)

Of course,

5:18

S… Speaker 1 (251. Example Creating a Filter Pipe)

we need to pass two parameters here.

5:19

S… Speaker 1 (251. Example Creating a Filter Pipe)

The first parameter is the filtered status,

5:24

S… Speaker 1 (251. Example Creating a Filter Pipe)

this property,

5:25

S… Speaker 1 (251. Example Creating a Filter Pipe)

which holds my string for which I want to filter.

5:29

S… Speaker 1 (251. Example Creating a Filter Pipe)

And the second argument is my prop name.

5:31

S… Speaker 1 (251. Example Creating a Filter Pipe)

So this will be a string.

5:32

S… Speaker 1 (251. Example Creating a Filter Pipe)

And this string should be status because I want to filter on the status

5:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

property.

5:38

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now if we save this and reload the app,

5:40

S… Speaker 1 (251. Example Creating a Filter Pipe)

you see no servers are displayed by default because no servers

5:44

S… Speaker 1 (251. Example Creating a Filter Pipe)

match this criteria.

5:45

S… Speaker 1 (251. Example Creating a Filter Pipe)

If I type stable here,

5:47

S… Speaker 1 (251. Example Creating a Filter Pipe)

you see we see the stable server,

5:50

S… Speaker 1 (251. Example Creating a Filter Pipe)

but that doesn't look correct because we should have more than one

5:54

S… Speaker 1 (251. Example Creating a Filter Pipe)

stable server.

5:55

S… Speaker 1 (251. Example Creating a Filter Pipe)

If we have a look at our app component,

5:56

S… Speaker 1 (251. Example Creating a Filter Pipe)

we get three stable servers.

5:59

S… Speaker 1 (251. Example Creating a Filter Pipe)

So we only view the first one

6:01

S… Speaker 1 (251. Example Creating a Filter Pipe)

And the reason for this is simply that right now here I'm

6:06

S… Speaker 1 (251. Example Creating a Filter Pipe)

returning inside of this for loop.

6:07

S… Speaker 1 (251. Example Creating a Filter Pipe)

So this is a little logical mistake here.

6:10

S… Speaker 1 (251. Example Creating a Filter Pipe)

We should, of course,

6:11

S… Speaker 1 (251. Example Creating a Filter Pipe)

return outside of it and also create this array outside of it like

6:15

S… Speaker 1 (251. Example Creating a Filter Pipe)

this.

6:15

S… Speaker 1 (251. Example Creating a Filter Pipe)

So with this change in place,

6:18

S… Speaker 1 (251. Example Creating a Filter Pipe)

now we should see that once we add stable,

6:20

S… Speaker 1 (251. Example Creating a Filter Pipe)

we see all stable servers.

6:22

S… Speaker 1 (251. Example Creating a Filter Pipe)

And once we add offline,

6:23

S… Speaker 1 (251. Example Creating a Filter Pipe)

we see the offline server.

6:25

S… Speaker 1 (251. Example Creating a Filter Pipe)

So our filter pipe is now working as expected.

6:30

S… Speaker 1 (251. Example Creating a Filter Pipe)

Now, if we wanted to see all servers,

6:32

S… Speaker 1 (251. Example Creating a Filter Pipe)

we need to adjust this code that in case our filter

6:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

string is empty,

6:37

S… Speaker 1 (251. Example Creating a Filter Pipe)

so we could add this here as a OR condition at the top.

6:40

S… Speaker 1 (251. Example Creating a Filter Pipe)

If filter string equals an

6:44

S… Speaker 1 (251. Example Creating a Filter Pipe)

empty string,

6:45

S… Speaker 1 (251. Example Creating a Filter Pipe)

that then we see all servers.

6:47

S… Speaker 1 (251. Example Creating a Filter Pipe)

And now we are able to filter for whichever servers

6:52

S… Speaker 1 (251. Example Creating a Filter Pipe)

we want to see.

6:53

S… Speaker 1 (251. Example Creating a Filter Pipe)

This works great,

6:54

S… Speaker 1 (251. Example Creating a Filter Pipe)

but there is one issue we will dive into in the next video.

இந்த ஒலிப்பதிவு AI (தானியங்கி பேச்சு அடையாளம்) மூலம் உருவாக்கப்பட்டது. பிழைகள் இருக்கலாம் - முக்கியமான பயன்பாட்டுக்கு மூல ஒலியை சரிபார்க்கவும். AI கொள்கை

❤️ STT.ai ஐ நேசிக்கிறீர்களா? உங்கள் நண்பர்களுக்குச் சொல்லுங்கள்!

சுருக்கம்

இந்த நகலெடுப்புக்கான AI சுருக்கத்தை உருவாக்க சுருக்கம் என்பதை க்ளிக் செய்யவும்.

இந்த நகலை AI க்குக் கேட்கவும்

இந்த நூலைப் பற்றி ஏதாவது கேட்கவும் - AI தொடர்புடைய பகுதிகளைக் கண்டுபிடித்து பதிலளிக்கும்.

மற்றொன்றை மாற்று