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);
The live Result link - https://stackblitz.com/edit/angular-1omip7-mucmrp