Primeng p-dropdown Is filtering done according to the group name?

Question

I want to filter by group name using codes on PrimeNG page.

<h3>Group</h3>
<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" placeholder="Select a Car" [group]="true" filter="true" filterBy="label,value">
    <ng-template let-group pTemplate="group">
        <img src="assets/showcase/images/demo/flag/{{group.value}}" style="width:20px;vertical-align:middle" />
        <span style="margin-left:.25em">{{group.label}}</span>
    </ng-template>
</p-dropdown>
<p>Selected Car: {{selectedCar3 || 'none'}}</p>

I used groupedCars variable .ts page

selectedCar3: string;
this.groupedCars = [
            {
                label: 'Germany', value: 'germany.png', 
                items: [
                    {label: 'Audi', value: 'Audi'},
                    {label: 'BMW', value: 'BMW'},
                    {label: 'Mercedes', value: 'Mercedes'}
                ]
            },
            {
                label: 'USA', value: 'usa.png', 
                items: [
                    {label: 'Cadillac', value: 'Cadillac'},
                    {label: 'Ford', value: 'Ford'},
                    {label: 'GMC', value: 'GMC'}
                ]
            },
            {
                label: 'Japan', value: 'japan.png', 
                items: [
                    {label: 'Honda', value: 'Honda'},
                    {label: 'Mazda', value: 'Mazda'},
                    {label: 'Toyota', value: 'Toyota'}
                ]
            }
        ];

But, I want to filter By group labels and item labels. Is it possible?

Answer 1

You can add additional value to filterBy property.

this.groupedCars = [
            {
                label: 'Germany', value: 'germany.png', 
                items: [
                    {label: 'Audi', value: 'Audi', additionalValue: 'germany.png'},
                    {label: 'BMW', value: 'BMW', additionalValue: 'germany.png'},
                    {label: 'Mercedes', value: 'Mercedes', additionalValue: 'germany.png'}
                ]
            }
        ];

and you can fill this value with forEach,

this.groupedCars.items.forEach( item => {
    item.forEach( childValue => {
       childValue.additionalValue = item.value;
    })
} );

finally on HTML file;

filterBy="label,value,additionalValue"