Up next in 10
Angular ngx-chips Example to Build HTML Tags & Chips Dropdown Form Input Field in Browser Using TS
0 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 how to build
0:07
out this tag input field inside where
0:09
you can add different tags inside your
0:12
angular application so here you can
0:14
define various kinds of tags so if you
0:18
upload any sort of YouTube video you
0:20
have seen these tag input fields you can
0:22
have different tags so it appears like
0:24
this you have this
0:28
cross button if you want to delete this
0:30
tag this will appear
0:32
so you can define these uh
0:36
all these options inside your angular
0:39
application and then it appears like
0:40
this
0:42
tag input field
0:44
form input field so so the name of the
0:48
package is ngx chips if you go to
0:51
npmjs.com just search for this package
0:53
ngx chips this is the name of the
0:57
package
1:02
so this is a complete example
1:07
so the name of the package is ngx chips
1:11
it's a tag input component for angular
1:14
applications so the command is simple
1:17
you install this it's almost having
1:19
35,000 weekly downloads so they do offer
1:22
a demo as well on their website
1:27
so this is different types of tags here
1:30
you can add different tags
1:34
like this
1:39
so you can even edit the tag as well
1:46
so they have given this example now to
1:48
integrate this it's very simple you need
1:50
to first of all
1:55
go to the app dot module.ts file of your
1:58
angular project and here you simply
2:00
import the module tag input module
2:03
coming from ngx chips and then you add
2:06
this to the imports array like this then
2:10
you need to go to the HTML
2:14
so this is your component here tag input
2:17
dropdown so here you it specifies three
2:21
options autocomplete items show
2:23
drop-down dynamic update
2:26
so these items are coming from the
2:28
typescript that we have
2:32
so we have defined three items here a
2:35
array of JSON objects which contains two
2:38
properties
2:40
in this easy way you can also define
2:42
some more options
2:48
so
2:53
like this you can define a series of
2:56
tags
2:58
inside your application
3:04
so now in the drop-down these tags will
3:07
appear like this
3:13
so this is a very simple tag input
3:16
component for angular applications it's
3:18
very easy to implement
3:21
uh also check out my website
3:23
freemediatools.com
3:25
uh which contains thousands of tools and
3:29
I will be seeing you in the next live
3:31
stream