According to the documentation of the Angular Material, when clicking the component to type, it should already display the check box with the options, and as I type, it will filter. Examples: Autocomplete | Angular Material
I made a test assigning values in the Array that fills the component and it worked, however, now that I've put this array to be populated with the result of a query in the database made by WebAPI, it only gives me the options after typing some character in the component
I'm using the matAutocomplete component of the Angular Material.
My HTML:
<mat-form-field>
<input type="text" placeholder="Informe o nome da unidade" aria-label="Text" matInput [formControl]="unityControl"
[matAutocomplete]="auto" [(ngModel)]="formChart.itemUnitySebrae.description">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectedUnit($event)">
<mat-option *ngFor="let unitys of filteredUnitys | async" [value]="unitys">
{{ unitys.description }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
TypeScript:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ComboBoxModel } from '../../../../shared/models/combo-box.model';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { ChartService } from '../../../../shared/services/chart.service';
import { MatDialog, MatSnackBar, MatTableDataSource } from '@angular/material';
import { LoaderService } from '../../../../shared/services/loader.service';
import { DirectorySebraeService } from '../../../../shared/services/directory.service';
import { ChartModel } from '../../../../shared/models/chart.model';
import { FormControl } from '@angular/forms';
import { Observable, ArgumentOutOfRangeError } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { UnitySebraeService } from '../../../../shared/services/unity-sebrae.service';
@Component({
selector: 'app-chart-save',
templateUrl: './chart-save.component.html',
styleUrls: ['./chart-save.component.css'],
providers: [DirectorySebraeService, ChartService]
})
export class ChartSaveComponent implements OnInit {
// Var
formChart: ChartModel = new ChartModel();
listActive: ComboBoxModel[] = new Array<ComboBoxModel>();
listDirectorySebrae: ComboBoxModel[] = new Array<ComboBoxModel>();
listUnitysSebrae: ComboBoxModel[] = new Array<ComboBoxModel>();
displayedColumns = ['Initials', 'UnityName', 'UnitySuperiorName', 'Status', 'Actions'];
dataSource: any = null;
unityControl: FormControl = new FormControl();
unitysList: Array<any> = [];
filteredUnitys: Observable<string[]>;
showResult = false;
message: any;
constructor(private route: ActivatedRoute, private router: Router,
private directorySebraeService: DirectorySebraeService, private chartService: ChartService,
private unitySebraeService: UnitySebraeService, public dialog: MatDialog, public snackBar: MatSnackBar,
private loaderService: LoaderService, private cdr: ChangeDetectorRef) {
if (localStorage.getItem('chart-save')) {
this.formChart = JSON.parse(localStorage.getItem('chart-save'));
this.saveForm();
}
}
ngOnInit() {
this.filteredUnitys = this.unityControl.valueChanges
.pipe(
startWith(''),
map(val => this.filter(val))
);
}
onSelectedUnit(event) {
this.formChart.itemUnitySebrae = event.option.value;
console.log(this.formChart.itemUnitySebrae);
}
ngAfterViewInit() {
setTimeout(() => this.loaderService.display(true), 100);
this.formChart = new ChartModel();
this.getListDirectorySebrae();
this.getListActive();
this.getListUnitySebrae();
this.getListUnityAutoComplete();
setTimeout(() => this.loaderService.display(false), 100);
this.cdr.detectChanges();
}
// Functions
filter(val: string): string[] {
if ((typeof val) === "object") return;
return this.unitysList.filter(item =>
item.description.toLowerCase().includes(val.toLowerCase()));
}
saveForm() {
this.loaderService.display(true);
this.chartService.save(this.formChart).subscribe(resp => {
if (!resp.data || !resp.data.result) {
this.snackBar.open(this.message.NO_RESULT, null, { duration: 5000 });
} else {
this.dataSource = new MatTableDataSource<ChartModel>(resp.data.result);
this.showResult = true;
}
},
error => {
},
() => {
this.loaderService.display(false);
localStorage.setItem('chart-save', JSON.stringify(this.formChart));
});
}
getListDirectorySebrae() {
this.directorySebraeService.getDirectorySebraeComboBox().subscribe(resp => {
if (resp.success) {
this.listDirectorySebrae = resp.data;
}
});
}
getListUnityAutoComplete() {
this.unitySebraeService.getListUnitySebrae().subscribe(resp => {
if (resp.success) {
console.log(resp);
this.unitysList = resp.data.result.object; // .result;
}
});
}
getListUnitySebrae() {
this.unitySebraeService.getUnitySebraeComboBox().subscribe(resp => {
if (resp.success) {
this.listUnitysSebrae = resp.data;
}
});
}
getListActive() {
this.listActive.push(new ComboBoxModel({ id: true, description: 'Ativo' }));
this.listActive.push(new ComboBoxModel({ id: false, description: 'Inativo' }));
}
}