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

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

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

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

• javascript
• angular
• typescript

• Your code does not work. It should be <mat-option *ngFor="let opt of options" [value]="opt.key"> {{opt.label}} </mat-option> and additionally samplelist should have the name options – kboul Commented Aug 9, 2018 at 10:39
• @kboul , duely noted. Thanks! It was just a quick refactoring mistake (to make the short version) – Tanasos Commented Aug 9, 2018 at 10:41
• Also change {{option.label}} to {{opt.label}} – kboul Commented Aug 9, 2018 at 10:42

4 Answers 4

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

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

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

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

You can try with this solution

I have create a demo on Stackitz

Component.html

<form [formGroup]="myForm">
    <div formGroupName="ctrlName">
        <mat-select formControlName="key">
            <mat-option *ngFor="let opt of options" [value]="opt.key">
                {{opt.label}}
            </mat-option>
        </mat-select>


        <div *ngIf="myForm.get('ctrlName').value.key=='keyOne'">First Selection</div>

        <div *ngIf="myForm.get('ctrlName').value.key=='keyTwo'">First Selection</div>


    </div>
</form>


<div *ngIf="selectedData && selectedData.key=='keyOne'">First Selection</div>

Component.ts

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

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.myForm = this.fb.group({
      ctrlName: this.fb.group({
        key: ['keyTwo', Validators.required],
        label: ['Key One 2'],
      })
    });
  }

HTML

Add [(ngModel)]="selectedCtrlName"

add if condition base on value/key

*ngIf="selectedCtrlName === opt_key"

TS

selectedCtrlName: any;

Final Result

<mat-select formControlName="ctrlName" [(ngModel)]="selectedCtrlName>
    <mat-option *ngFor="let opt of options" [value]="opt.key">
        {{opt.label}}
    </mat-option>
</mat-select>

<div *ngIf="selectedCtrlName === 'opt_key'"></div>

In your case should be something like

<div *ngIf="selectedCtrlName === 'keyTwo'"></div>

Please note that opt_key is the value of the option which can be a number, string etc.