angular - conditional element based on mat-select option

Question

How am I able to achieve the following:

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

Sample list from the component:

options = [
    { key: 'keyOne', label: 'Key One 1' },
    { key: 'keyTwo', label: 'Key One 2' },
    { key: 'keyThree', label: 'Key One 3' }
]

Answer 1

According to the angular material website (example here), you need to add [formControl]="selected" to the mat-select component.

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

Answer 2

Because of the usage of formControls , I had to reference the entire form and specify the value:

*ngIf="form.value.specValue == 'valueName'"