Angular 6 Autocomplete Search Tutorial With Example

Today, We want to share with you Angular 6 Autocomplete Search Tutorial With Example from scratch.In this post we will show you Custom autocomplete directives in Angular 6, hear for AutoComplete Textbox in Angular 6 with Dynamic Data we will give you demo and example for implement.In this post, we will learn about Angular 6 autocomplete typeahead search example from scratch with an example.

Angular 6 Autocomplete Search Tutorial With Example from scratch

There are the Following The simple About Angular 6 Autocomplete Search Tutorial With Example from scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 text input autocomplete, so the Using Angular 6 Material Auto-complete With Async Data for this example is following below.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client

Step 1 : AngularJS autocomplete with callback ajax json

index.html

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<my-app>loading</my-app>

Step 2 : Angular 6 Material Auto-complete With Async Data

main.ts

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;
}).catch(err => console.error(err));

Step 3 : Create a polyfills files

polyfills.ts

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

Step 4 : Main App Module and All files

app/app.component.css

* {
  font-family: Roboto;
}

.is-loading ::ng-deep .mat-option-text {
  display: flex;
  justify-content: center;
}

app/app.component.html

<h2>Angular 6 autocomplete from $http Example</h2>
<p>Create autocomplete search with Angular 6 Example</p>
<form class="example-form" [formGroup]='studentsForm'>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Choose a student" [matAutocomplete]="auto" formControlName='studentInput'>
  </mat-form-field>
  <span>Your choice is: {{studentsForm.get('studentInput').value | json}}</span>

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngIf="isProcessing" class="is-loading"><mat-spinner diameter="50"></mat-spinner></mat-option>
    <ng-container *ngIf="!isProcessing">
      <mat-option *ngFor="let student of filteredStudents" [value]="student">
        <span>{{ student.name }}</span>
        <small> | ID: {{student.id}}</small>
      </mat-option>
    </ng-container>
  </mat-autocomplete>
</form>

app/app.component.ts

import { Component, OnInit } from '@angular/core';
import {Student, IUserResponse} from './student.class';
import {FormBuilder, FormGroup} from '@angular/forms';
import {AppService} from './app.service';
import {switchMap, debounceTime, tap, finalize} from 'rxjs/operators';
import {Observable} from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  filteredStudents: Student[] = [];
  studentsForm: FormGroup;
  isProcessing = false;
  
  constructor(private fb: FormBuilder, private appService: AppService) {}

  ngOnInit() {
    this.studentsForm = this.fb.group({
      studentInput: null
    })

      this.studentsForm
      .get('studentInput')
      .valueChanges
      .pipe(
        debounceTime(300),
        tap(() => this.isProcessing = true),
        switchMap(value => this.appService.search({name: value}, 1)
        .pipe(
          finalize(() => this.isProcessing = false),
          )
        )
      )
      .subscribe(students => this.filteredStudents = students.results);
  }

  displayFn(student: Student) {
    if (student) { return student.name; }
  }
  
}

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import {MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatButtonModule, MatProgressSpinnerModule} from '@angular/material';
import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';
import {InMemDataService} from './in-memory-data.service';
import {AppService} from './app.service';

@NgModule({
  imports:      [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatInputModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemDataService, { dataEncapsulation: false, delay: 1000 }),
    ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [AppService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app/app.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map, tap} from 'rxjs/operators';
import {Student, IUserResponse} from './student.class';

@Injectable()
export class AppService {

  constructor(private http: HttpClient) {}

  search(filter: {name: string} = {name: ''}, page = 1): Observable<IUserResponse> {
    return this.http.get<IUserResponse>('/api/students')
    .pipe(
      tap((response: IUserResponse) => {
        response.results = response.results
          .map(student => new Student(student.id, student.name))
          .filter(student => student.name.includes(filter.name))

        return response;
      })
      );
  }
}

app/hello.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello Pakainfo',
  template: `<h1>Pakainfo.com Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

app/in-memory-data-service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemDataService implements InMemoryDbService {
  createDb() {
    let students = [
      { id: 1, name: 'Rachel Weisz' },
      { id: 2, name: 'Dianna Agron' },
      { id: 3, name: 'Scarlett Johansson ' },
      { id: 4, name: 'Jennifer Lawrence ' },
      { id: 5, name: 'Emma Stone' },
      { id: 6, name: 'Gal Gadot' },
      { id: 7, name: 'Alexandra Daddario' },
      { id: 8, name: 'Megan Fox' },
      { id: 9, name: 'Margot Robbie' },
      { id: 10, name: 'Jessica Alba' },
      { id: 11, name: 'Rachel McAdams' }
    ];
    return {students: {
      total: students.length,
      results: students
    }};
  }
}

student.class.ts

export class Student {
  constructor(public id: number, public name: string) {}
}

export interface IUserResponse {
  total: number;
  results: Student[];
}

Autocomplete with Search box in Angular 6 Demo

Also Read :  Angular 6 Introduction Tutorial features of angular 6.0
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Autocomplete Search Tutorial With Example from scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]