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.
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