Issue
I have one dropdown which I have to shown 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 = {
memberContact: 'Member Contact',
referral: 'Referral',
other: 'Other',
standarActions:'Standard Actions',
billing: 'Billing'
}
.component.ts
public getMemberContactActionCodes() {
let baseUrl = `/api end point`;
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);
}
);
}
public billingSelect(data: any) {
this.billingActionId = data;
}
public otherSelect(data: any) {
this.otherActionId = data;
}
public referralSelect(data: any) {
this.referralId = data;
}
public actionSelect(data: any) {
this.actionStatusTypeID = data;
}
.component.html
<div class="row mt-15">
<div class="form-group">
<div class="col-sm-3 new-record__label">
<label for="action" class="cpp-required"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select class="form-control">
<option value="" disabled [selected]="true"></option>
<option >Referral</option>
<option>Member Contact</option>
<option *ngIf="appState.getRoleBaseAccess()?.hasCoachOnAddStandardActionAccess">Standard Actions</option>
<option *ngIf="appState.getRoleBaseAccess()?.hasCoachOnAddStandardActionAccess">Gym Visits</option>
<option>Billing</option>
<option >Other</option>
</select>
</div>
</div>
</div>
<div class="row mt-15">
<div class="form-group">
<div class="col-sm-3 >
<label for="action" > <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 reqirement is when we select any list from the category from first list we have to show the related dropdown lists in second dropdowns
for example If I select Referrel fromcategory list then I have to show the referralCodes dropdown lists in Action dropdown,In UI side I have below
Solution
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
Answered By - danywalls
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.