Many inquiries are focused on setting a default value to display in a "Select" control. In this particular case regarding Angular 8 template driven forms, the issue lies in the inability to show the default value in the mat-select when the button is clicked, despite the console.log reflecting the correct value:
<mat-select [formControl]="itemControl" required [(value)]="itemValue">
<mat-option>--</mat-option>
<mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
</mat-select>
The relevant part of my component code appears as follows:
export class MyComponent {
items: string[] = [''];
itemControl = new FormControl('', [Validators.required]);
itemValue: string = '';
myButtonClick(): void {
this.itemValue = this.getItems()[0]; <--- This returns the first element in a valid array
console.log(this.itemValue);
}
}
What could be causing this issue?