Up next in 10
Angular ngx-typehead Example to Build Autocomplete HTML Search Input Form Field in Browser Using TS
Jun 13, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this video so
0:05
in this video I'll show you angular
0:07
module or component which allows you to
0:10
integrate the autocomplete functionality
0:12
like this so as soon as you write
0:15
something inside this angular
0:18
autocomplete field the suggestions will
0:20
come
0:22
as autocomplete you will see that we are
0:26
fetching all this from
0:29
the API and these suggestions are
0:33
showing right here
0:40
so you can even have static data as well
0:43
like autocomplete suggestions will show
0:45
in the drop-down
0:49
so like this
0:53
you can even have a custom template as
0:55
well so these suggestions will also be
0:57
styled like this you can style your
1:00
suggestions which comes in the
1:02
autocomplete
1:04
like this
1:07
so the module is
1:10
ngx
1:11
type ahead so if you go to npmjs.com
1:16
uh just search for this package ngx
1:20
type
1:30
I think it is ngx type
1:33
ahead this is the package I think
1:36
the space is not there yeah this is the
1:38
package the command is simple you
1:41
install this It's uh 9:30 weekly
1:44
downloads
1:46
so
1:48
now I'll show you the complete example
1:50
so first of all you need to go to this
1:52
app.module.ts
1:54
file and right here you just need to
1:56
import this uh import line here import
2:00
ngx type ahead module from ngx type
2:04
ahead so just add this line and go to
2:07
the imports array and just add this
2:10
module that you imported ngx type head
2:12
module and then after that you need to
2:15
go to app dot component html file
2:22
so right here we are fetching this data
2:24
here if you see we have this input field
2:30
so if I delete this you will let me
2:32
write this once again input type text
2:36
um we can attach this ngx type ahead
2:42
attribute and then the value which will
2:45
be the actual query you will write
2:51
and then the URL and the parameters so
2:54
here for this example we are fetching
2:57
this autocomplete suggestions from a
2:59
Google suggest queries API
3:02
so as soon as you write this now you
3:05
will see
3:07
these results will come from Google
3:12
as you are writing here you will see all
3:14
these suggestions will come so
3:18
if you remove this ngx so that's the
3:21
actual attribute you need to assign ngx
3:23
type ahead so this will actually
3:26
responsible for all the suggestions that
3:28
you are seeing right here
3:31
and we bind did this handle result
3:34
selected this function will
3:35
automatically execute as soon as you
3:38
write something in the input field so
3:40
this function is defined in the app dot
3:43
component.ts file so if you see
3:52
so right here we first of all import
3:55
this
3:57
ngx type ahead component from this
4:00
package and then we add this to the
4:02
imports
4:04
like this and this is this is this
4:07
dotquery is equal to result and in the
4:10
constructor we are passing all these
4:13
necessary things you can check out this
4:15
example they have given this example on
4:17
their official docs so it's very simple
4:20
to integrate this autocomplete
4:22
functionality for your angular
4:23
application
4:26
so also check out my website
4:28
freemediatools.com
4:30
which contains thousands of tools
4:33
related to audio video and image and I
4:35
will be seeing you in the next live
4:38
stream