On init, I called a method (loadCategories) to get some data that I used in my mat-autocomplete, but when the data got updated and after recalling the (loadCategories) method the mat-autocomplete didn't update too, so unless I refresh the tab the mat-autocomplete values stays the same even if a category got added or updated.
this is my current code :
async ngOnInit() {
await this.loadCategories();
this.filteredOptions = this.myControl
.valueChanges
.pipe(
startWith(''),
map(value => this._filterGroup(value))
)
}
addSubmit(){
this.catgService.addCatgory(this.newCategory).subscribe(
async data =>{
this.successAdd = true
this.all_categories = []
await this.loadCategories();
console.log(this.all_categories);
this.errorMessage = "Sous categorie ajouter avec succes"
},
error=>{
this.successAdd = false
this.errorMessage = error.error.message
}
)
}
on the html side I did:
<mat-form-field style="width: 100%;">
<input type="text" id="catg" placeholder="Choisir une catégorie" matInput [matAutocomplete]="autoGroup" [formControl]="myControl" [(ngModel)]="value">
<mat-autocomplete #autoGroup="matAutocomplete" (optionSelected)='parentSelected($event.option.value)' [displayWith]="displayFn">
<mat-option *ngFor="let parent of filteredOptions | async" [value]="parent.category">
{{parent.category.name}}
</mat-option>
</mat-autocomplete>
<button type="button" mat-button style="background: transparent;border: none;" *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value = ''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>