Up next in 10
Angular ngx-angular-autocomplete Library Example to Build Autocomplete Form Field in Browser in TS
Jan 24, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-angular-autocomplete-library-example-to-build-autocomplete-form-field-in-browser-in-ts/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you how to
0:04
integrate the autocomplete search field
0:06
inside angular uh there is a specific
0:09
module where you can actually create
0:10
these autocomplete search field where
0:13
you have multiple options as you type
0:15
right here in this search field you will
0:17
see these suggestions will show and you
0:19
will be able to select suggestions so as
0:21
soon as you select the employee you will
0:23
see the information the selected
0:26
employee so you can pre-configure these
0:30
options inside your typescript code you
0:32
can Define this you can see we have
0:34
defined this array of employees each
0:37
employee has three properties ID name
0:39
gender so as soon as you write in this
0:41
autocomplete search field all these
0:43
suggestions will
0:44
show and when you select a particular
0:47
employee you will see the information
0:49
about that particular employee so there
0:50
is a package here if you go to npmjs.com
0:53
uh just search for this package which is
0:57
NGS angular autocomplete this is
1:00
actually the package here and uh the
1:03
command is very simple I've already
1:05
installed it npmi ngx angular autoc
1:08
complete it's a fairly new package 135
1:11
weekly downloads so now to configure
1:14
this module I will show you from scratch
1:17
I've written a complete step by-step
1:19
blog post on my website you can go to
1:21
the description to get all the source
1:23
code so I will just start from
1:28
scratch so first of all you we need to
1:30
go to your app. module. TS file to
1:33
configure this so we just need to import
1:35
this module by adding the import line
1:39
import
1:41
ngx
1:43
autocomplete module and it will be
1:45
coming from this package which is ngx
1:49
angular autocomplete and then we need to
1:51
add this inside this Imports array so we
1:54
simply say
1:56
ngx autocomplete module so we simply add
1:59
this inside the Imports aray then we
2:02
open the ab. component. typescript file
2:06
so right here you will declare a array
2:10
of employees
2:12
so it can be any variable this can this
2:15
data can be coming from a database or
2:17
API so we have this employees array and
2:21
each object will have three properties
2:24
ID the name of the
2:26
employee then you can even have a gender
2:30
as
2:33
well so in this have we have this object
2:37
here this represents one employee which
2:39
has three properties and similarly we
2:42
can
2:43
create as many
2:45
employees for the drop down so you can
2:48
simply paste so we have 15 employees
2:52
right here if you see that so we have
2:54
declared this
2:55
array and now we come to the app.
2:58
component. HTML files so to render this
3:00
autocomplete field so we will have an
3:10
H1 so we will have a div tag and inside
3:14
this we will
3:15
display this directive which is ngx
3:18
autoc
3:24
complete so automatically you will have
3:27
this input field so now for the
3:30
suggestions to come we need to pass some
3:33
properties to this directive which is
3:35
the search keyword so whatever that you
3:44
search so we just need to put this
3:49
variable so in the typescript code we do
3:53
need to declare this variable which
3:57
is the selected employe so right here if
4:01
you go you will declare
4:05
a selected
4:07
[Music]
4:12
employee so you declared a variable here
4:15
selected employee which is any
4:20
and then we need to pass the second
4:22
parameter which
4:25
is the input
4:28
ID you can configure this I'm just
4:31
giving it a search employee then we give
4:35
it a
4:36
placeholder so that the user may clearly
4:40
see what is enter the employee name so
4:42
this placeholder text will
4:44
show so then we put the entries that
4:48
will show in the drop- down so this
4:51
directive controls this and here we
4:54
directly passing the employees object
4:57
array of object so now if you search you
4:59
see these suggestions come as soon as
5:02
you type right
5:04
here so you will see all these
5:07
suggestions will come in the drop- down
5:09
and as soon as you select one employee
5:12
you need to pass this directive which is
5:16
selected value so once you select the
5:20
value from the dropdown you will need to
5:22
bind a this call back function which
5:25
will execute as soon as you select a
5:27
value from the drop down
5:32
so so we have actually binded this
5:35
function which is Select event now we
5:37
need to go to the typescript code and
5:39
just Define this function so right
5:46
here we will Define this function which
5:48
is Select events so we will convert this
5:51
into Json stringify
5:54
event and now to display the selected
5:57
employee we come to the template file we
5:59
add this
6:02
code selected employee and in the double
6:05
quy brackets we Define the value of
6:07
selected employee so as soon as you
6:09
now you will see
6:12
that selected employee so you can have
6:15
this nice little drop down it's a handy
6:18
little module inside angular if you want
6:20
to integrate the autocomplete search
6:22
field you can use this I've shown you a
6:25
step byep instruction and also you can
6:27
go to my website where it written a
6:29
complete blog post with full source code
6:32
and also check out my website as well uh
6:35
free mediat tools.com uh which contains
6:38
thousands of tools regarding audio video
6:40
and MH and I will be seeing you guys in
6:43
the next video