I'm encountering a problem where I am unable to update locally declared variables in the component controller that triggers the mat-autocomplete. The issue is that these variables are confined within a specific scope, preventing me from making any modifications.
Does anyone have suggestions or insights on how to update the mat-autocomplete's scope variables?
Basically, I am trying to combine a display string with a variable linked to the input model. This configuration generates an autocomplete input field that provides user-friendly guidance. However, the text does not get updated promptly when clearing the input, as it keeps adding unnecessary content continuously.
html
<input
[(ngModel)]="filter>
mat-autocomplete
#auto="matAutocomplete"
[displayWith]="displayFn">
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
component.ts
displayFn(search): string | undefined {
if(!search) return; //check if the search isn't already populated
if(!search.match(/(=|\*)/)){
if(this.filter){
this.filter += ' ' + search + '==*term*';
}else{
this.filter = search +'==*term*';
}
return this.filter; //this isn't persisting across the lifecycle
}
}