Angular 5 autocomplete

Angular 5 Autocomplete Input-Text and Options

The autocomplete is a normal text input extended by a panel of suggested options i.e.
autocomplete.html –
<form class="class-form">
  <mat-form-field class="class-full-width">
    <input type="text" placeholder="Select a user" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let user of users" [value]="user">
        {{ user }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

And autocomplete.ts –
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** Simple autocomplete */
@Component({
  selector: 'autocomplete',
  templateUrl: 'autocomplete.html',
  styleUrls: ['autocomplete.css']
})
export class Autocomplete {

  myControl: FormControl = new FormControl();

  users = [
    'Anil Singh',
    'Aradhya',
    'Reena',
    'Alok Singh',
    'Raju Ch',
    'Dilip Sing'
   ];
}

And NgModule with angular material file –
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {Autocomplete} from './app/autocomplete';

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ]
})
export class DemoMaterialModule {}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [Autocomplete],
  declarations: [Autocomplete],
  bootstrap: [Autocomplete],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 5 Autocomplete Input-Text and Options Angular 5 Autocomplete Input-Text and Options Reviewed by Anil Singh on 4:37 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^