Up next in 10
Angular Material Input Search Form Input Field in Browser Using TypeScript
0 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:03
uh hello guys uh welcome to this video
0:05
so in this video i'll show you a angular
0:07
package if you want to integrate the
0:10
material input form search input field
0:13
inside your angular project this is a
0:15
very good module the name of the module
0:17
is ngxmat
0:19
select search so this is if you go to
0:23
npmjs.com
0:24
just search for this third party angular
0:27
component
0:30
and the very first module which comes
0:32
this is the angular component for
0:35
material input
0:38
form search input field so the command
0:40
is simple you simply install this by
0:42
executing this command this will install
0:45
this it's almost having 121,000 weekly
0:48
downloads it's a very popular package
0:51
and they do offer live demo as well so
0:56
the first live demo let me show you so
0:58
it actually you if you have a select
1:01
field where you have various options so
1:03
here you can actually have a search
1:05
input field as well and with scroll bar
1:08
you have multiple options you can select
1:10
it so you can see it's a google material
1:13
design look into it this is the material
1:16
design select input field where you have
1:19
various options in the drop-down then if
1:22
you want to select multiple options you
1:24
can even do that as well you have
1:26
checkboxes available then you can select
1:29
multiple options as well so you can see
1:32
it also supports multiple selections as
1:35
well so if you want to select a single
1:38
option
1:39
you can do as well
1:42
single selection with custom entries you
1:45
can even do that as well single
1:47
selection with option groups you can see
1:54
server side search also it supports so
1:56
it's a pretty popular package it
1:59
supports all these options that is shown
2:01
and now to integrate this it's very
2:03
simple they do have given this example
2:06
of stack blitz you can go to this
2:08
example so this is all these examples
2:12
one by one they have given of various
2:15
examples so the first thing you need to
2:17
do you need to go to this uh app
2:19
dotule.ts
2:21
file of your angular project and simply
2:24
you need to require all these material
2:26
icons which is coming from add the
2:29
rectangular material and then you need
2:31
to add this import statement right here
2:34
import ngxmat select search module which
2:37
will be coming from ngxmat select search
2:40
and then you need to go to this imports
2:42
array and just add this ngx select
2:47
search module so this module supports it
2:51
basically
2:53
depends upon the material so you need to
2:56
import all the material icons first
2:58
before importing this module so just
3:00
make sure that you import also in
3:03
install uh angular material as well and
3:07
then you just need to go to the
3:09
app.component html so we have this matt
3:12
form field inside this we have matt
3:15
select so here you
3:19
can go to this example so they have
3:21
given this full example so all the
3:24
source code they have given so you can
3:26
check out this example code right here
3:29
so the integration is quite simple you
3:32
simply
3:36
import this by writing the html and
3:40
typescript code
3:45
so this is a full angular project here
3:47
you will see
3:53
this is for multiple this is
3:56
so you can see they have given full
3:58
example almost nine examples they have
4:00
given regarding this module so thank you
4:03
very much for watching this video and
4:05
also check out my website
4:07
freemediattools.com
4:09
uh which contains thousands of tools
4:11
regarding audio video and image and i
4:14
will be seeing you in the next live
4:15
stream