I have an angular application In that I have two dropdowns first one is picklist dropdown and second one is to show the dropdown 9or bind the data)based on selecting the items from the picklists

.component.ts

public billingSelect(data: any) {
    this.billingActionId = data;
}
public otherSelect(data: any) {
  this.otherActionId = data;
}

public actionSelect(data: any) {
  this.actionStatusTypeID = data;
}

.component.html

<div >
  <div >
    <div >
      <label for="action"> <b>Category</b></label>
    </div>
    <div >
      <select>
        <option value="" disabled [selected]="true"></option>
        <option>Billing</option>
        <option>other</option>
        <option>action</option>
      </select>
    </div>
  </div>
</div>

<select
  
  name="drpAction"
  id="actionSelect1ID"
  (change)="actionSelect($event.target.value)"
  [(ngModel)]="actionStatusTypeID"
>
  <option
    *ngFor="let code of memberContactCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>
<select
  
  name="drpAction"
  id="billingActionId"
  (change)="billingSelect($event.target.value)"
  [(ngModel)]="billingActionId"
>
  <option
    *ngFor="let code of billingActionCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>
<select
  
  name="drpAction"
  id="otherActionId"
  (change)="otherSelect($event.target.value)"
  [(ngModel)]="otherActionId"
>
  <option
    *ngFor="let code of otherActionCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>

.service.ts

public getMemberContactActionCodes() {
    let baseUrl = `/endpoint`;
    this._restfulService
      .restfulGetData(baseUrl)
      .subscribe(
        (actionLookupData: ActionLookupData) => {
          if (actionLookupData) {
            this.memberContactCodes = actionLookupData.MemberContactCodes;
            this.referralCodes = actionLookupData.ReferralCodes;
            this.otherActionCodes = actionLookupData.OtherActionCodes;
            this.standardActionCodes = actionLookupData.StandardActionCodes;
            this.billingActionCodes = actionLookupData.BillingActionCodes;
 }
        },
        (err) => {
          console.error(err);
        }
      );
  }

In the above I have to show the dropdown lists based on the selecting the dropdown items from the picklist items.

Let us say If I select the Billing from the first dropdown picklist items I ahve to show the data related to Billing i.e billingActionCodes etc. Can anyone helpme on this

CodePudding user response：

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