Angular 6 Group Items in Select

Show option group in Angular with select and align group items properly. There is nothing special to Angular if you already know the ngFor loop. You are just missing the HTML part optgroup. We are going to see some working examples by using JSON data to show, you can use any service or data from anywhere.

First we will see some pure HTML examples with hard coded values so we can understand how we can use the same feature with Angular to bind the data and show items in groups.

Let's take some exaples of auto-mobile complanies and their models:

FORD
    1. Fiesta
    2. Focus
    3. Fusion
    4. Mustang
HONDA
    11. Accord
    12. Civic   
    13. CR-V    
HYUNDAI
    21. Accent
    22. Elentra
    23. Kona
    24. Sonata
    25. Tucson

How can we show the same in html? Go ahead and add the following HTML and you will get the result:

<select>
  <optgroup label="FORD">
    <option value="1">Fiesta</option>
    <option value="2">Focus</option>
    <option value="3">Fusion</option>
    <option value="4">Mustang</option>
  </optgroup>
  <optgroup label="HONDA">
    <option value="11">Accord</option>
    <option value="12">Civic</option>
    <option value="13">CR-V</option>
  </optgroup>
  <optgroup label="HONDA">
    <option value="21">Accent</option>
    <option value="22">Elentra</option>
    <option value="23">Kona</option>
    <option value="24">Sonata</option>
    <option value="25">Tucson</option>
  </optgroup>
</select>

Wasn't that easy to make it working?

To do the same in Angular with dynamic data from database or from some other files, we need a proper JSON, it's all how will you make it easy for your-self, let me try may way:

For me data will looke something like this:

[
    {
        group: 'Group1 Name',
        items: [
            {id: 1, name: 'item name'},
            {id: 2, name: 'item name'}
        ]
    },
    {
        group: 'Group2 Name',
        items: [
            {id: 21, name: 'item1 name'},
            {id: 22, name: 'item2 name'}
        ]
    }   
]

Let's go ahead and convert our above data in this format:

[
  {
        group: 'FORD',
        items: [
            {id: 1, name: 'Fiesta'},
            {id: 2, name: 'Focus'},
            {id: 3, name: 'Fusion'},
            {id: 4, name: 'Mustang'}
        ]
    },
    {
        group: 'HONDA',
        items: [
            {id: 11, name: 'Accord'},
            {id: 12, name: 'Civic'},
            {id: 13, name: 'CR-V'}
        ]
    },
    {
        group: 'HYUNDAI',
        items: [
            {id: 21, name: 'Accent'},
            {id: 22, name: 'Elentra'},
            {id: 23, name: 'Kona'},
            {id: 24, name: 'Sonata'},
            {id: 24, name: 'Tucson'}
        ]
    }
]

If you have your data source ready then jump to the HTML and change something like this:

<select [(ngModel)] ='model'>
  <optgroup *ngFor = 'let grp of dataSource' label="{{grp.group}}">
    <option *ngFor = 'let item of grp.items' [value]="item.id">{{item.name}}</option> 
  </optgroup>
</select>

Other blogs you may like

Angularjs dropdown select value, text, multiple values with demo

Angularjs dropdown/slect have more option than any other .net language dropdownlist, we can bind and get only Id or Text or both from dropdown, even we can bind and get more than two values like value, text and role from a dropdown and even more. We can try to see all the possible ways to bind the... By Ali Adravi   On 05 Sep 2015  Viewed: 46,484

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 57,357