I have an hour list box ( angular material list box which consists of numbers 1 to 12 ) which I am converting to a mat auto complete.
The list box is not in a reactive form.
Below is the html where I have created the template to pull in the static list options.
<table>
<tr>
<td>
<mat-form-field>
<input type="text" [(ngModel)]="fromCreateDateTime.Hour" [ngModelOptions]="{standalone: true}" placeholder="Hour" matInput [matAutocomplete]="autoFromCreateDateTimeHour">
<mat-autocomplete #autoFromCreateDateTimeHour="matAutocomplete" placeholder="Hour" [displayWith]="displayFn">
<mat-option *ngFor="let hour of hoursList" [value]=" hour ">{{hour.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</td>
</tr>
</table>
Here the hoursList
is an array as defined below. It is not an observable.
hoursList: Array, any > =
export const hoursList: Array < any > = [{
name: "00",
value: 0
}, {
name: "01",
value: 1
}, {
name: "02",
value: 2
}, {
name: "03",
value: 3
}, {
name: "04",
value: 4
}, {
name: "05",
value: 5
}, {
name: "06",
value: 6
}, {
name: "07",
value: 7
}, {
name: "08",
value: 8
}, {
name: "09",
value: 9
}, {
name: "10",
value: 10
}, {
name: "11",
value: 11
}, {
name: "12",
value: 12
}];
How do I apply filter ( as typed in the mat input ) to the mat autocomplete since the data here is a non - async data.
Pretty straight forward if you're considering to use just a String Array:
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@Component({
selector: 'autocomplete-filter-example',
templateUrl: 'autocomplete-filter-example.html',
styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
myControl = new FormControl();
options: string[] = [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
];
filteredOptions: Observable < string[] > ;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(
option => option.toLowerCase().includes(filterValue)
);
}
}
And your Template:
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text"
placeholder="Pick one"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
Here's a Sample StackBlitz for your ref.