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

Contents

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

Step 1 : AngularJS autocomplete with callback ajax json

index.html




loading

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

Angular 6 autocomplete from $http Example
Create autocomplete search with Angular 6 Example

  
    
  
  Your choice is: {{studentsForm.get('studentInput').value | json}}

  
    
    
      
        {{ student.name }}
         | ID: {{student.id}}

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 {
    return this.http.get('/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: `Pakainfo.com Hello {{name}}!`,
  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

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.