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