How to bind the dropdown lists based on selecting the items from the dropdowns

Question

I have one dropdown which I have to show this dropdown from constant.ts file And In second dropdown I have to show the dropdown based on the selecting the first dropdown values.

.constant.ts

export const ActionRecordConstant = {
  contact: 'Contact1',

  about: 'About',
};

.component.ts

public getCodes() {
  let baseUrl = `/api end point`;
  this._restfulService
    .restfulGetData(baseUrl)

    .subscribe(
      (actionLookupData: ActionLookupData) => {
        if (actionLookupData) {
          this.contactCodes = actionLookupData.contactCodes;
          this.aboutCodes = actionLookupData.aboutCodes;
        }
      },
      (err) => {
        console.error(err);
      },
    );
}

public contactSelect(data: any) {
  this.contactId = data;
}
public aboutSelect(data: any) {
  this.aboutId = data;
}

.component.html

<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Contact</b></label>
    </div>
    <div class="col-sm-7">
      <select class="form-control">
        <option value="" disabled [selected]="true"></option>
        <option>About</option>
        <option>Contact</option>
      </select>
    </div>
  </div>
</div>
<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Action</b></label>
    </div>
    <div class="col-sm-7">
      <select>
        <option value="" disabled [selected]="true"></option>
        <option>//code</option>
      </select>
    </div>
  </div>
</div>

So my requirement is when we select any list from the category from first list we have to show the related dropdown lists in second dropdowns.

Answer 1

You can use a subject to take the action and switch case to assign the specific values for the dropdown.

<select
  *ngIf="billingActions$ | async as actions"
  #action
  (change)="onSelectAction(action.value)"
>
  <option value="0" selected>pick action</option>
  <option *ngFor="let action of actions" [value]="action.name">
    {{ action.name }}
  </option>
</select>
<select *ngIf="actionCodes$ | async as codes">
  <option *ngFor="let code of codes">{{ code.name }}</option>
</select>

On select action pick the value and assign the specific codes.

 private selectedAction = new Subject();
  private selectedAction$ = this.selectedAction.asObservable();

  billingActions = [
    {
      name: 'billing',
    },
    {
      name: 'member',
    },
    {
      name: 'other',
    },
  ];

  memberContactCodes = [
    {
      name: 'member Action Code A',
    },
    {
      name: 'member Action Code B',
    },
  ];

  billingActionCodes = [
    {
      name: 'billing Action A',
    },
    {
      name: 'billing Action B',
    },
  ];

  otherActionCode = [
    {
      name: 'Other Action A',
    },
    {
      name: 'OtherAction B',
    },
  ];

  categories = [
    { id: 1, name: 'billing' },
    { id: 2, name: 'others' },
  ];

  billingActions$ = of(this.billingActions);

  actionCodes$ = this.selectedAction$.pipe(
    map((action: string) => {
      switch (action) {
        case 'billing':
          console.log('billin');
          return this.billingActionCodes;
        case 'member':
          return this.memberContactCodes;
        case 'other':
          return this.otherActionCode;
        default:
          return this.billingActionCodes;
      }
    })
  );

  onSelectAction(value) {
    this.selectedAction.next(value);
  }

You can see an example here: https://stackblitz.com/edit/angular-ivy-5ea4fw