Request: Children

[jocelynduc]

I would like to use ng-select with "children" as we can do with:
https://optimistex.github.io/ng2-select-ex/

Is this available? on the roadmap?

[varnastadeus]

@jocelynduc it doesn't seem to work there. Can you describe what this feature is about?

[jocelynduc]

I put a new example where the feature is actually working:
https://optimistex.github.io/ng2-select-ex/

The idea of this feature is to group options. In the example, you can see that the cities are grouped by country. Have a look at it, it speaks by itself
It should act the same as in a pure element. Only the children are effectively selectable. public items: any[] = [ { id: 100, text: 'Austria', children: [ {id: 54, text: 'Vienna'} ] }, { id: 200, text: 'Belgium', children: [ {id: 2, text: 'Antwerp'}, {id: 9, text: 'Brussels'} ] }, ... }

[varnastadeus]

I think you can achieve similar result with custom option templates, since items are already grouped. The part that is missing, is ability to select children. I will check if there is any way to make it work for now.
Anyhow this is valid request and we will see how to better implement this so it is supported out of the box in the future.

[anjmao]

@varnastadeus If you will be able to create example on demo page with items grouping and custom templates that would be great.

[carlhussey]

Any update on this? I believe it will just need to act the same as optgroup in vanilla html.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

[anjmao]

Hi @carlhussey, I started working on this, home will implement it during this or next week.

[MadJlzz]

I made a simple workaround to do what you're expecting while waiting for the native feature.

<ng-select class="custom"
           [searchable]="true"
           placeholder="Select Option Type">
  <ng-template ngFor let-optionType [ngForOf]="optionTypeMock">
    <ng-option [disabled]="true" value="optionType">-- {{ optionType.category }} --</ng-option>
    <ng-option *ngFor="let style of optionType.styles" value="style">{{ style }}</ng-option>
  </ng-template>
</ng-select>

With a JSON object like this:

optionTypeMock = [
  {
    category: 'VANILLA',
    styles: [
      'EUROPEAN'
    ]
  }
];

[anjmao]

I just pushed support for grouping items with groupBy https://ng-select.github.io/ng-select#/grouping Now internals are ready for children support.

[MadJlzz]

@anjmao Updated your library version and already using it ! It's working like a charm, thanks !

[achimha]

I'm very much favor of an optgroup tag! There are situations where it's much more convenient to use markup to define the list than a data structure and benefit from the template engine in Angular.

[newprogrammer1991]

Hi, Can I make like dropdown - click by country and show citiyes ?

[newprogrammer1991]

??

[saurabh47]

I'm also looking for ng-option-group tag.
so we can define template like. Is this tag available in this library ?

<ng-select>
  <ng-option-group label="Swedish Cars">
    <ng-option value="volvo">Volvo</ng-option>
    <ng-option value="saab">Saab</ng-option>
  </ng-option-group>
  <ng-option-group label="German Cars">
    <ng-option value="mercedes">Mercedes</ng-option>
    <ng-option value="audi">Audi</ng-option>
  </ng-option-group>
</ng-select>