Angular 14 ngx-typeahead Example to Fetch Google & Youtube Autocomplete Results in Input Field in Browser Using TypeScript

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

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 { }

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

<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>

<h2 class="text-center">Google & Youtube Autocomplete App</h2>

<br>

<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>

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

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)
  } 
}

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.