#101642
yavordashew
Member

Hi Gourav,
The comboboxcomponent does not support the exact same functionality you aim to achieve.
However one way to do so is to use inputMember property to show in the input of the combobox.
Little code snippet on how to do this:
In your app.component.ts file:


export class AppComponent implements AfterViewInit, OnInit {
	@ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent;
	ngOnInit(): void {
		// onInit code.
	}
	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
	init(): void {
		// init code.
comboBox.dataSource = [
            {label: 'Affogato' ,
            value: 'fruit',
            group : 'Affogato fruit'
            },
            {
            label: 'Americano' ,
            value: 'fruit',
            group : 'Affogato fruit'
            },
            {label: 'Breve',
            value: 'fruit',
            group : 'Affogato fruit' },
            {
            label: "Café Crema",
            value: 'fruit',
            group : 'Affogato fruit'
        }
        ]
        this.combobox.inputMember = 'group';
}

And in you app.component.html file :

<smart-combo-box #combobox [selectionMode]="'zeroOrMany'" [selectionDisplayMode]="'tokens'"
    [placeholder]="'Select items:'" ></smart-combo-box>

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/