Implementing Autocomplete using Angular Material UI
As a unique input control with an integrated dropdown to display all potential matches to a specific query, the mat-autocomplete is an Angular Directive.
As soon as the user puts something into the input area, this control operates as a real-time suggestion box.
You can utilise mat-autocomplete to deliver search results from nearby or distant data sources.
app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatAutocompleteModule,MatInputModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatAutocompleteModule,
MatInputModule,
MatFormFieldModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Lets add the element in app.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-form-field appearance="outline">
<input
style="border: 0px !important; padding: 0px !important"
type="text"
[formControl]="sessionFormControl"
matInput
placeholder="Choose Session"
[matAutocomplete]="sessionautoPickUp"
[(ngModel)]="selectedSession"
(focus)="onSessionFocusEvent($event)"
(input)="onSessionFocusEvent($event)"
/>
<mat-autocomplete #sessionautoPickUp="matAutocomplete">
<mat-option
*ngFor="let record of filterSession | async"
[value]="record.value"
>
{{ record.session}}
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="sessionFormControl.invalid">Session is required for Registration. Type first Character of Session in Box</mat-error>
</mat-form-field>
</div>
<div class="form-group">
<button class="btn btn-primary w-100" type="submit" [disabled]="form.invalid"> Submit </button>
</div>
</form>
app.component.ts.
import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
sessionList: Session[] = [];
selectedSession: string;
pickSession: boolean = false;
sessionFormControl = new FormControl(null,Validators.required);
filterSession: Observable<Session[]>;
this.filterSession = this.sessionFormControl.valueChanges.pipe(
startWith(''),
map((value) => this.changeSession(value))
);
public changeSession(value: string): Session[] {
const filterValue = value.toString().toLowerCase();
return this.sessionList.filter((session) =>
session.sessionstartson.toString().includes(filterValue)
);
}
onSessionFocusEvent(event: any) {
if (event.target.value != null && event.target.value != '') {
this.pickSession= false;
} else {
this.pickSession= true;
}
}
onSubmit() {
var selectedSession = this.sessionList.find(
({ session }) => session === this.sessionFormControl.value
);
var form = new Registration();
form.sessionid = selectedSession.sessionid;
}
getSessions() {
let obj = {
pageSize: 1000,
pageNumber: this.pageNumber
};
this.sessionService.getSessions(obj).subscribe((response) => {
if (response.isSuccess) {
this.sessionList = response.list;
}
});
}
ngOnInit() {
this.getSessions();
}
}
