I am currently working on an Angular 6 app:
I have two mat-select inputs that I want to connect in a way that if the selected option in my First select is equal to the value 'AAA', then the Second select should be hidden.
- First Mat-Select -> 'AAA'
- Second Mat-Select -> hidden
I have attempted something like this:
<div class="form-group">
<label class="col justify-content-start">Encryption Mode</label>
<mat-form-field class="col" >
<mat-select placeholder="Select encryption mode" formControlName="encryptionMode" #FirstSelect>
<mat-option *ngFor="let modeCh of encryptionModeData" [value]="modeCh.value">
{{modeCh.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-group" *ngIf="!(FirstSelect== 'AAA')">
<label class="col justify-content-start">Key Files</label>
<mat-form-field class="col" >
<mat-select placeholder="Select file" formControlName="keyFiles">
<mat-option *ngFor="let modeCh of encryptionModeData" [value]="modeCh.value">
{{modeCh.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Unfortunately, this approach is not functioning as expected.
Any suggestions?