I love the combo component but it seems to require multiselect. How do I get single select? Dropdown is the closest, but the title doesn't change on selection and it's not formatted at all like the rest of the controls where there's a "placeholder" label and then once selected the title and value are available (like on an input/label combo)
Hi, Scott.
Thank you for the interest in our Angular product. I hope that I will be able to help you with my answer.
Our combo is only multi-selectable and the main reason for that is that we are following material guidelines for that.
It is possible by using drop down and adding some code in you application, to achieve single selection combo. Please look at the "To" field in the following Chip sample, where input group is used along with drop down - there is placeholder, there is filtering, there is custom drop down items. I will wait for your feedback for this demo and if you need some more modifications on that scenario don't hesitate to ask!
Here there is a sample with drop down and combo, where drop down is used to create single selection combo.
Best regards,
Nikolay Alipiev
Software Developer
Thanks, that's helpful, but it boggles the mind that you're making everyone figure out how to implement a dropdown themselves vs. providing one. Nothing in the material guidelines precludes a combo drop-down that's single-select.
<igx-input-group #inputGroupClient type="box" (click)="onClientClicked()"> <input type="text" name="client" id="client" placeholder="Choose client..." readonly [igxDropDownItemNavigation]="dropdownClient"> <igx-suffix> <igx-icon>{{ arrowClient }}</igx-icon> </igx-suffix> <label for="client">Client</label> </igx-input-group> <igx-drop-down #dropdownClient width="300px" (onSelection)="onClientSelected()" (onClosed)="onClientClosed()"> <igx-drop-down-item *ngFor="let client of clients"> {{ client.name }} </igx-drop-down-item> </igx-drop-down>
But I'm getting a runtime error like so. Line 24 of OrderEditComponent.html is the first line of the code from above.
ERROR TypeError: Cannot read property 'valid' of undefined at IgxInputGroupComponent.get [as validClass] (igniteui-angular.js:25089) at Object.eval [as updateRenderer] (OrderEditComponent.html:24) at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458) at checkAndUpdateView (core.js:19833) at callViewAction (core.js:20069) at execComponentViewsAction (core.js:20011) at checkAndUpdateView (core.js:19834) at callViewAction (core.js:20069) at execEmbeddedViewsAction (core.js:20032) at checkAndUpdateView (core.js:19829) at callViewAction (core.js:20069) at execComponentViewsAction (core.js:20011) at checkAndUpdateView (core.js:19834) at callWithDebugContext (core.js:20722) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:20400)