Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on February 2, 2023

 

 

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

 

 

TypeScript
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

 

 

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

 

 

 

Recent Posts

  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme