Welcome folks today in this blog post we will be using the ngx-typeahead
library in angular 14 to fetch
youtube and google autocomplete
results and display it inside the input field using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-typeahead
And after that you will see the below directory
structure of the angular app as shown below
And now you need to go to app.module.ts
file and include the module as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { NgxTypeaheadModule } from 'ngx-typeahead'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxTypeaheadModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
As you can see we are including the FormsModule
which is necessary for this library and then we are also importing the NgxTypeaheadModule
and adding it inside the imports array as shown above.
And now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<h2 class="text-center">Google & Youtube Autocomplete App</h2> <br> <section class="col-sm-12"> <div class="search-results style-3"> <input type="text" [value]="query" placeholder="Type and Get Autocomplete Results From Google and Youtube" ngxTypeahead class="col-sm-12 form-control" [taUrl]="url" [taParams]="params" (taSelected)="handleResultSelected($event)"> </div> </section> <ul *ngFor="let key of keywords"> <li>{{key}}</li> </ul> |
As you can see in the above html
code we are having the simple input
field inside which we have attached the ngxTypeahead
directive for the autocomplete functionality and then we are having the dynamic
query variable from which we will be fetching these results. And then we have the url
and params
variables also. And then we have the method binded to input field whenever we select the results
inside the autocomplete. And then we have the ul
element where we are displaying all the keywords
that the user selects
from the dropdown.
And now we need to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = ""; title = ""; keywords = [] public url = "//suggestqueries.google.com/complete/search"; public params = { hl: "en", ds: "yt", xhr: "t", client: "youtube" }; public query = ""; handleResultSelected(value){ console.log(value) this.keywords.push(value) } } |
As you can see we are declaring the keyword
empty array where we will be storing all the selected
keywords by the user. And then we have declaring the url
of the google api where all the results
will be fetched and passing all the params
we have the object in which we have the properties for the language
and we are specifying the client
which is youtube. And then we have the method
which executes when the user selects the value from the autocomplete
dropdown. And here inside this method we are pushing the keyword
inside the keywords array.