Búsqueda de sitios web

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'"

Artículos relacionados