javascript - angular - elemento condicional basado en opción de mat-select
¿Cómo puedo lograr lo siguiente:
<mat-select formControlName="ctrlName">
<mat-option *ngFor="let opt of options" [value]="opt.key">
{{opt.label}}
</mat-option>
</mat-select>
<div *ngIf=" SHOW IF A CERTAIN OPTION FROM THE LOOPED LIST ABOVE IS SELECTED "></div>
Lista de ejemplo del componente:
options = [
{ key: 'keyOne', label: 'Key One 1' },
{ key: 'keyTwo', label: 'Key One 2' },
{ key: 'keyThree', label: 'Key One 3' }
]
Respuesta #1
Según el sitio web de angular material (ejemplo aquí), necesitas agregar [formControl]="selected" al componente mat-select.
<mat-select [formControl]="selected">
<mat-option *ngFor="let opt of options" [value]="opt">
{{option.label}}
</mat-option>
</mat-select>
<div *ngIf="selected===<your_specific_value>"></div>
Respuesta #2
Debido al uso de formControls, tuve que hacer referencia a todo el formulario y especificar el valor:
*ngIf="form.value.specValue == 'valueName'"
