CODEWITHSUNDEEP
angularapievents
K.S
K.S

Reputation: 463

How to display the dropdown values based on other dropdown selected value using typescript in Angular 4

I want to change dropdown value based on selected other dropdown selected. this is HTML

 <select class="form-control" name="category_id" formControlName="category_id" (change)="changeProfession($event.target.value)">
                                    <!-- <option value="" d>Select Category (required)</option> -->
                                    <option *ngFor='let surveyCategory of surveyCategoryList' [ngValue]="surveyCategory._id">{{ surveyCategory.category }}</option>
                                    <app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'category_id')">
                                    </app-field-error-display>
                               </select>

here I want to get value as per the selected category 

<div class="form-group label-floating select_lang">
                                <label class="control-label">Profession</label>
                                <select class="form-control" name="profession_id" formControlName="profession_id" >
                                     <!-- <option value="" >Select Category (required)</option> -->
                                    <option *ngFor='let profession of ProfessionList' [ngValue]="profession._id">{{ profession.profession }}</option>
                                    <app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'profession_id')">
                                    </app-field-error-display>
                               </select>

                            </div>

this is the ts file

changeProfession(categoryid){
    debugger;
    this.authService.getProfessionList(categoryid).subscribe(data => {
        debugger;
        if (data.success) {
            debugger;
            this.ProfessionList = data.profession;
            console.log(data);
            setTimeout(() => {
            //if (obj.survey_category_id)
                    //this.updateProfileForm.controls['profession_id'].setValue(obj.profession_id._id);
                 $('.select_lang').removeClass('is-empty');
            }, 10);
        }

    });
}

and this is the service file

// Get survey profession list
 getProfessionList = function (categoryid) {
     debugger;
    return this.http.get(this.api_url + 'profession/list/'+ categoryid, this.getAuthHeaderOption()).map(res => res.json());
}

When I am calling this event then category id is passing but value in not showing. Please tell me what I am doing wrong here .

Upvotes: 0

Views: 469

Answers (1)

programoholic
programoholic

Reputation: 5194

The Angular way of implementing your requirement will be slight different than the way you have done.

in your component.ts file add below code where you have initialize the form :

 this.sampleForm.controls['category_id'].valueChanges.subscribe((value) => {
       this.authService.getProfessionList(value).subscribe(data => {
            this.ProfessionList = data.profession;
       }); 
 });

replace sampleForm with your formGroup Name. Also note that the value of data.profession should be array of objects.

Here is sample working Stackblitz link : Working Demo

Upvotes: 1

Related Questions