I have a mat-select which consist of two options Individual Customers and Organizational Customers. If I select Ind Cust from drop down then I should see three option First Name,Last Name and Customer Id. But if I select Organization Customer I should be able to see Org Name and Org Id. I have all the HTML code ready however I am not able to display options based on selection.
HTML Code:
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option value="indCust">IndividualCustomer</mat-option>
<mat-option value="orgCust">Organizational Customer</mat-option>
</mat-select>
</mat-form-field>
<div class="row" *ngIf="indCust; orgCust">
// Code for Input Box of Individual Customer
</div>
<ng-template #orgCust >
//Code for dropdown of Organization Customer
</ng-template>
Typescript Code
selected = '';
indCust: Boolean ;
if(this.selected == 'indCust'){
this.indCust = true;
} else {
this.indCust = false;
}
Can someone explain me what I am doing wrong and help me figure out correct way to do it.