Up next in 10
Angular ng2-search-filter Example to Build HTML Table Search Filter Form Input Field in Browser
7 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys welcome to this video So
0:04
in this video I'll show you a Angular
0:08
component which allows you to build out
0:11
a custom search filter If you're
0:15
displaying some kind of tabular data
0:17
inside your Angular application so we
0:19
have a simple table right here which
0:21
contains three columns ID name and
0:24
country We have a bunch of data that we
0:26
are displaying So if you want to search
0:28
inside this tabul data by name if you
0:32
just type n you will see it will filter
0:34
out the tabular data and it will show
0:37
only the searched data that you see So
0:42
in real time it will filter out as you
0:45
type it will filter out the table by
0:48
whatever name that you write
0:52
So this is the custom angular module The
0:56
name of the module is ng2 search filter
1:00
If you go to npmjs.com just type ng2
1:04
search filter So if you have a lot of
1:07
large tabular data that you're
1:09
displaying inside your angular
1:11
application then in that case it comes
1:13
into the picture So the installation is
1:16
quite simple You install this module by
1:18
executing this command It's almost got
1:21
24,000 weekly downloads So it's a pretty
1:24
po popular package And now to just
1:27
integrate this it's quite easy First of
1:29
all you need to go to app domodule.ts
1:33
file of your angular project And right
1:35
here you need to add this import line
1:39
So import
1:41
the ng2
1:44
search
1:47
pipe module and it will be coming from
1:50
this package ng2 search
1:54
filter and after that you just go to the
1:57
imports array and simply import just add
2:00
this module that you imported and then
2:02
just close this file go to your app dot
2:06
component html file let me
2:09
delete everything
2:11
and here you render out the whatever
2:15
tableau data that you are want to render
2:18
out It can be coming from an API It can
2:20
be a simple table here So we have a
2:24
simple
2:26
table that we rendered So we have three
2:28
columns ID name and country And for
2:31
rendering out the data here we are using
2:33
a simple ng4 directive We are looping
2:36
through
2:38
all this data
2:41
and then we are printing out in double
2:43
curly bracket ID name and country So
2:46
here in the app.component
2:48
typescript file we just need to define
2:50
all the tabular data that you want to
2:52
display And for this we just need to
2:55
have the variable where you will enter
2:58
your search text And the second variable
3:01
will be for displaying all the tabular
3:05
data So this will a simple array of
3:08
objects we are displaying right here So
3:10
this data can be coming from a database
3:12
or API For this example I am just
3:15
showing you this array of objects So now
3:18
if you see on the right hand side we
3:19
have a table right here which contains
3:21
this data and we also have this search
3:23
in input field right here Here you can
3:26
start writing
3:28
whatever data that you want to search
3:30
for You will see instantly it will
3:32
filter out the tabular data and it will
3:34
only show the records that you search
3:36
for And uh this is coming because of
3:39
this form input field that we declared
3:41
right here If you see input type text
3:44
and we attach this name attribute search
3:47
and we assign this ngmodel directive
3:50
inside angular and we equal to this
3:53
variable that we declared in the
3:55
typescript here which is search text So
3:57
whatever search that you do it will
4:00
filter out
4:02
on this table So this table we have
4:05
assigned this filter tag here If you see
4:08
filter by search text So if I remove
4:12
this you will now see the filter will
4:14
not happen It will give you this error
4:16
So
4:18
this attribute is most important You
4:21
need to give this attribute to your
4:23
table row So it will filter out using
4:28
the
4:30
if you just type here you will see it is
4:32
filtering out So in this easy way you
4:34
can integrate this module inside your
4:36
angular application and start using it
4:39
And it's widely used because if you have
4:42
a large list of data that you're
4:43
displaying then you need to have a
4:46
searched input field just to allow users
4:48
to search uh for the data and it will
4:52
save a lot of time as well and also
4:54
check out my website here which is
4:56
freemediatools.com
4:58
uh which contains thousands of tools
5:00
related to audio video and image and I
5:03
will be seeing you in the next one
#Computers & Electronics
#Programming
#Software