Up next in 10
Angular ngx-chips Example to Build Autocomplete Tag Input Form Field With Dropdown in Browser
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-chips-example-to-build-autocomplete-tag-input-form-field-with-dropdown-in-browser/
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 guys welcome to this video so
0:02
in this video I will show you a angular
0:05
package which allows you to add these
0:08
autocomplete tag input Fields inside
0:11
your angular application so if you are
0:13
expecting user to enter tags like this
0:16
you can remove this as well by it also
0:19
have the cross icon and nice little
0:21
animation it has whenever you add a tag
0:23
or you remove it so sometimes in sort of
0:27
applications you need this tag input so
0:29
if you want want to allow the user to
0:31
submit tags so there is this nend chips
0:35
or tag input inside your angular
0:37
application so there is a package here
0:40
which allows you to build this awesome
0:43
looking tag input field so if you go to
0:45
npmjs.com uh just search for this
0:48
package ngx Das chips this is actually a
0:52
tag input component for
0:55
angular uh the command is very simple
0:58
this is actually the command
1:00
it's almost having 27,000 weekly
1:03
downloads so I have written a step
1:05
by-step blog post on my website
1:07
regarding this so you can get the full
1:09
source code as well alongside with just
1:12
reading the blog post as well so now to
1:15
get started here I will show you step by
1:18
step how to get started with this module
1:21
so I will delete everything and start
1:23
from scratch so just delete everything
1:26
right here just wait so right here the
1:29
very First Step you need to do you need
1:31
to go to this file here app. module.
1:33
typescript file and first of all you
1:36
need to register your module so you just
1:38
need to add this import statement right
1:40
here so just write import and Then
1:43
followed by the tag input module and
1:46
which will be coming from this package
1:48
which is ngx Das chips so just need to
1:52
add this import statement right here we
1:55
import this module and then we go to the
1:57
Imports array and then add this tag
2:00
input
2:01
module so that's all the configuration
2:04
needed and then you can directly use
2:06
this
2:07
module uh first of all we go to the
2:10
typescript code here we decare some
2:13
choices that we need to have for the tag
2:16
input field so right here we declare an
2:19
items array here so this will be a
2:23
static array but this data can be coming
2:26
from your database or rest API as well
2:28
so we will have this array of objects
2:31
each object will have two properties
2:33
display property and a value which will
2:35
be
2:36
one so you can take any data of your
2:39
choice I'm just taking some example
2:42
data then display here will
2:48
be so you just need some data
2:52
to display the tax
2:58
here so now now if you see that we have
3:01
declared three objects right here in
3:03
this items array each object having two
3:05
properties display and the value so now
3:08
we come to the app. component. HTML file
3:11
right here so inside this we directly
3:15
embed
3:17
this for this we need to use this uh tag
3:25
input
3:26
directive opening and closing so right
3:29
here as soon as you write this you will
3:32
see this input
3:35
field you will be able to add TXS right
3:38
here if you see that this gray color it
3:41
changes to gray color and also it having
3:44
this cross icon as well so if you click
3:46
it you will be able to remove tax or add
3:49
TX but we are haven't seen the drop down
3:52
so if you also want to see the drop down
3:54
while entering the tax you can configure
3:57
this
3:59
first of all we need to feed some data
4:01
to this so we say NG model and we attach
4:05
the
4:08
actual hard code hardcoded item right
4:11
here so this
4:18
property so we can also attach the
4:21
hardcoded item you can write anything
4:23
right
4:25
here so once you load the page it can
4:28
have this item present at the starting
4:30
so in this way using this NG model
4:32
directive you can directly attach some
4:34
data to it and then for showing the drop
4:36
down we have this component right here
4:38
tag input
4:41
dropdown opening and closing tag so now
4:44
inside this you just you basically
4:47
provide the drop- down options that you
4:49
want to have so first of all we have the
4:53
option for autoc complete items so if
4:56
you want the auto complete to be there
4:58
you provide the array of items so now as
5:01
you type
5:03
here you will see this nice little drop
5:06
down autoc complete as soon as you try
5:09
to type here so it will give you these
5:11
suggestions so it will make it very much
5:13
easy for the user to input the TX the
5:15
second option
5:17
is if you want to show the drop
5:21
down if the items are
5:25
empty that's a Boolean parameter if you
5:27
want to show the drop down even if the
5:29
drop down is empty you can do that and
5:31
the third property is dynamic update and
5:35
you can even dynamically update your
5:37
items as well this is also a Boolean
5:40
parameter so this is actually the thing
5:44
right
5:45
here tag input field in angular you can
5:51
directly just uh use this module to just
5:56
make this tag input field in angular so
5:58
thank you very much for for watching
6:00
this video and also check out my website
6:02
as well free mediat tools.com uh which
6:04
contains thousands of tools regarding
6:06
audio video ANH and I will be seeing you
6:10
guys in the next video