How to filter second dropdown based on selection of first dropdown? - Angular

Question

I have a two dropdowns that looks like this:

so my plan is to load all subcategories, but I would like to display in dropdown only these which are related to selected Category ( that one which contain ParentId as Id of selected Category).

And here is my code:

<!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>

<!--Subcategory-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Sub category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;" name="subCategory" #subCategory="ngModel" required [(ngModel)]="article.subCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="subcategory" *ngFor="let subcategory of subCategories">{{subcategory.title}}</option>
    </select>
  </div>
</div>

If I need to post typescript code please tell me, but Here I got values from database, and this is only problem for me, how to filter Subcategory based on Category selection.

Thanks guys Cheers!

this might help, basically use the `change` or `ngModelChange` https://stackoverflow.com/questions/44840735/change-vs-ngmodelchange-in-angular — Ric, Apr 18 '18 at 12:44
@Ric I thought about *ngIf="subcategory.parentId = mainCategory.Id"somewhere but I get an error :/ — billy_56, Apr 18 '18 at 12:45
you could use the `change` event to get the value of your category, then `filter` the values of your `subCategories` based on your conditions — Ric, Apr 18 '18 at 12:48
Change subCategory according to change in value of mainCategory. eg. this.form.get('account_type').valueChanges.subscribe(val => { } ) — Franklin Pious, Apr 18 '18 at 12:49

bugs · Accepted Answer · 2018-04-18T13:16:46.720

4

As some of the comments pointed out, listen to the change of you first select element to dynamically generate the options for you second select with a filter.

Something like:

filterSubById(id) {
    return this.subCategories.filter(item => item.parentId === id);
}

I've made a quick working demo to show how.

EDIT

The way this works is that the selected value from the first select is bound to the mainCategory property of your component. Hence, mainCategory changes depending on what the user selects from the first menu. The second select dynamically loads the options depending on what the user chooses on the first one; this is accomplished with a filter function that returns all the elements in the subCategories array whose parentId matches the id of the option selected in the first menu.

edited Apr 18 '18 at 13:16

answered Apr 18 '18 at 12:52

bugs

14,631
5
48
52

can you explain this little bit please, I thought that there should be added code on main category, when user press main category to filter sub category, everything works but I don't understand how come :P Thanks – billy_56 Apr 18 '18 at 13:12
Sure, I've added some comments :) – bugs Apr 18 '18 at 13:16
I understand everything but I don't understand how come first selection fires up filterSubById which is part of second selection, can you show me the code where making selection on first dropdown causing selection of second.. – billy_56 Apr 19 '18 at 08:28
The beauty of angular is that we don't have to explicitly call `filterSubByid()`. Angular is smart enough to recognise that the function has to be called whenever `mainCategory` changes, and when we select an option from the first dropdown we are in fact changing `mainCategory` – bugs Apr 19 '18 at 08:33
@bugs Thanks it worked for me. Could you please elaborate little more on how does the change on first dropdown calls `filterSubByid()` function? – Sushmit Sagar Jan 10 '19 at 10:37

score 0 · Answer 2 · answered Apr 18 '18 at 12:47

It's a very broad question with many correct answers. I would say the best thing to do is to add (change)="filterSubcategories()" to your select element, that will trigger the filterSubcategories() function, where you can select the correct subcategories, based on your article.mainCategory.

 <!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" (change)="filterSubcategories()" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>

How to filter second dropdown based on selection of first dropdown? - Angular

2 Answers2

Linked