PrimeNg - Dropdown with grouping option

[AlbaSerena18]

In my project, I'm using the dropdown element of PrimeNG. In the official PrimeNG documentation (https://www.primefaces.org/primeng/v8.2 ... #/dropdown) it says that it is possible to group elements using SelectItemGroup and SelectItem. However, that page only teaches how to do it with two levels. I would like to know how to add one more level.

My idea would be the following and I would like to know how I can get it:

Code: Select all

this.groupedCars = 
[
    {
        label: 'Germany', 
        items: 
            [
                {
                    label: 'Audi', 
                    items: 
                        [   
                            {
                                label: 'Audi A1',
                                value: 'Audi A1'
                            },
                            {
                                label: 'Audi A3',
                                value: 'Audi A3'
                            }
                        ]
                },
                {
                    label: 'BMW', 
                    value: 'BMW'
                },
                {
                    label: 'Mercedes',
                    value: 'Mercedes'
                }
            ]
    }
]

Below I show the interfaces of SelectItemGroup and SelectItem.

The SelectItemGroup interface:

Code: Select all

export interface SelectItemGroup {
    label: string;
    value?: any;
    items: SelectItem[];
}

The interface SelectItem:

Code: Select all

export interface SelectItem {
    label?: string;
    value: any;
    styleClass?: string;
    icon?: string;
    title?: string;
    disabled?: boolean;
}

I have tried to convert SelectItem to SelectItemGroup but I get an error that it is not possible because SelectItem does not have the Item property.

• Angular version: 8.2.14
  PrimeNG version: 8.1.1