Bind element to Angular mat-select

Question

So, I have a simple angular material mat-select which looks like that:

  <mat-form-field appearance="outline" fxFlex="45%">
    <mat-label> select</mat-label>
    <mat-select formControlName="status"> 
      <mat-option *ngFor="let status of statusesEnum" [value]="status.value">
        {{status.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

here is my statusEnum:

 statusesEnum = [{ name: "new", value: "1" }, { name: "passed", value: "2" }, { name: "done", value: "3" }]

Now, I have this element:

 <conditions [conditionForm]="reasonsForm" ></conditions>

which I want to appear only for specific selected value. here is what I tried:

 <mat-select #statusSelect formControlName="status">    
      <mat-option *ngFor="let status of statusesEnum" [value]="status.value">
        {{status.name}}
      </mat-option>
    </mat-select>
<conditions *ngif="statusSelect.selectedIndex==2" [conditionForm]="reasonsForm"> </conditions>

but it's not working.any idea why?

Answer 1

I think, I have a solution for you however, your statusSelect might not have selectedIndex and thing does not work like that. So, here is my code given below=>

HTML:

<mat-form-field appearance="outline" fxFlex="45%">
    <mat-label> select</mat-label>
    <mat-select formControlName="status" [(value)]="selectedStatus" > 
      <mat-option *ngFor="let status of statusesEnum" [value]="status">
        {{status.name}}
      </mat-option>
    </mat-select>
</mat-form-field>

 &nbsp;&nbsp;
    Selected = {{selectedStatus?.name}}
    <br>
<conditions *ngIf="selectedStatus?.value==2" [conditionForm]="reasonsForm" ></conditions>

TS:

export class AppComponent  {
  selectedStatus:any;
  constructor() {}
  reasonsForm:any;
  statusesEnum = [{ name: "new", value: "1" }, { name: "passed", value: "2" }, { name: "done", value: "3" }]

}

NoteL Please check the link of Stackbliz demo link.