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.

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद