Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxComboComponent

Hierarchy

Implements

  • DoCheck
  • OnInit
  • IgxComboBase
  • AfterViewInit
  • ControlValueAccessor
  • OnInit
  • OnDestroy
  • EditorProvider

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgxComboComponent(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _displayDensityOptions: IDisplayDensityOptions, _injector: Injector): IgxComboComponent

Properties

addItemTemplate

addItemTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboAddItem>
         <button class="combo__add-button">
             Click to add item
         </button>
     </ng-template>
 </igx-combo>

allowCustomValues

allowCustomValues: boolean = false

Controls whether custom values can be added to the collection

// get
let comboAllowsCustomValues = this.combo.allowCustomValues;
<!--set-->
<igx-combo [allowCustomValues]='true'></igx-combo>

ariaLabelledBy

ariaLabelledBy: string

An @Input property that set aria-labelledby attribute

<igx-combo [ariaLabelledBy]="'label1'">

autoFocusSearch

autoFocusSearch: boolean = true

An @Input property that controls whether the combo's search box should be focused after the onOpened event is called When false, the combo's list item container will be focused instead

clearIconTemplate

clearIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the combo CLEAR button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboClearIcon>
         <igx-icon>clear</igx-icon>
     </ng-template>
 </igx-combo>

disabled

disabled: boolean = false

An @Input property that enabled/disables combo. The default is false.

<igx-combo [disabled]="'true'">

emptyTemplate

emptyTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboEmpty>
         <div class="combo--empty">
             There are no items to display
         </div>
     </ng-template>
 </igx-combo>

filterable

filterable: boolean = true

An @Input property that enabled/disables filtering in the list. The default is true.

<igx-combo [filterable]="false">

footerTemplate

footerTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the FOOTER for the combo items list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboFooter>
         <div class="combo__footer">
             This is a custom footer
         </div>
     </ng-template>
 </igx-combo>

headerItemTemplate

headerItemTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboHeaderItem let-item let-key="groupKey">
         <div class="custom-item--group">Group header for {{ item[key] }}</div>
     </ng-template>
 </igx-combo>

headerTemplate

headerTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the HEADER for the combo items list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboHeader>
         <div class="combo__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-combo>

id

id: string = `igx-combo-${NEXT_ID++}`

Gets/gets combo id.

// get
let id = this.combo.id;
<!--set-->
<igx-combo [id]='combo1'></igx-combo>

itemTemplate

itemTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering ITEMS in the combo list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboItem>
         <div class="custom-item" let-item let-key="valueKey">
             <div class="custom-item__name">{{ item[key] }}</div>
             <div class="custom-item__cost">{{ item.cost }}</div>
         </div>
     </ng-template>
 </igx-combo>

itemsWidth

itemsWidth: string

Configures the drop down list width

// get
let myComboItemsWidth = this.combo.itemsWidth;
<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>

onAddition

onAddition: EventEmitter<IComboItemAdditionEvent> = new EventEmitter<IComboItemAdditionEvent>()

Emitted when an item is being added to the data collection

<igx-combo (onAddition)='handleAdditionEvent()'></igx-combo>

onClosed

onClosed: EventEmitter<void> = new EventEmitter<void>()

Emitted after the dropdown is closed

<igx-combo (onClosed)='handleClosed()'></igx-combo>

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

Emitted before the dropdown is closed

<igx-combo (onClosing)='handleClosing($event)'></igx-combo>

onDataPreLoad

onDataPreLoad: EventEmitter<any> = new EventEmitter<any>()

Emitted when new chunk of data is loaded from the virtualization

<igx-combo (onDataPreLoad)='handleDataPreloadEvent()'></igx-combo>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<void> = new EventEmitter<void>()

Emitted after the dropdown is opened

<igx-combo (onOpened)='handleOpened()'></igx-combo>

onOpening

onOpening: EventEmitter<CancelableEventArgs & IBaseEventArgs> = new EventEmitter<CancelableEventArgs & IBaseEventArgs>()

Emitted before the dropdown is opened

<igx-combo onOpening='handleOpening($event)'></igx-combo>

onSearchInput

onSearchInput: EventEmitter<IComboSearchInputEventArgs> = new EventEmitter<IComboSearchInputEventArgs>()

Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)

<igx-combo (onSearchInput)='handleSearchInputEvent()'></igx-combo>

onSelectionChange

onSelectionChange: EventEmitter<IComboSelectionChangeEventArgs> = new EventEmitter<IComboSelectionChangeEventArgs>()

Emitted when item selection is changing, before the selection completes

<igx-combo (onSelectionChange)='handleSelection()'></igx-combo>

overlaySettings

overlaySettings: OverlaySettings = null

Set custom overlay settings that control how the combo's list of items is displayed. Set:

<igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo>
 const customSettings = { positionStrategy: { settings: { target: myTarget } } };
 combo.overlaySettings = customSettings;

Get any custom overlay settings used by the combo:

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;

placeholder

placeholder: any

Defines the placeholder value for the combo value field

// get
let myComboPlaceholder = this.combo.placeholder;
<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>

searchPlaceholder

searchPlaceholder: string = "Enter a Search Term"

Defines the placeholder value for the combo dropdown search field

// get
let myComboSearchPlaceholder = this.combo.searchPlaceholder;
<!--set-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>

toggleIconTemplate

toggleIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboToggleIcon let-collapsed>
         <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     </ng-template>
 </igx-combo>

type

type: string = "box"

An @Input property that sets how the combo will be styled. The allowed values are line, box, border and search. The default is box.

<igx-combo [type]="'line'">

valueKey

valueKey: string = null

Combo value data source property.

// get
let myComboValueKey = this.combo.valueKey;
<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>

width

width: string

Sets the style width of the element

// get
let myComboWidth = this.combo.width;
<!--set-->
<igx-combo [width]='250px'></igx-combo>

Accessors

collapsed

  • get collapsed(): boolean

data

  • get data(): any[]
  • set data(val: any[]): void

displayDensity

displayKey

  • get displayKey(): string
  • set displayKey(val: string): void

groupKey

  • get groupKey(): string
  • set groupKey(val: string): void

itemHeight

  • get itemHeight(): number
  • set itemHeight(val: number): void

itemsMaxHeight

  • get itemsMaxHeight(): number
  • set itemsMaxHeight(val: number): void

totalItemCount

  • get totalItemCount(): number
  • set totalItemCount(count: number): void

valid

value

  • get value(): string

virtualizationState

Methods

close

  • close(): void

deselectAllItems

  • deselectAllItems(ignoreFilter?: boolean, event?: Event): void

deselectItems

  • deselectItems(items: Array<any>, event?: Event): void

ngDoCheck

  • ngDoCheck(): void

open

  • open(): void

selectAllItems

  • selectAllItems(ignoreFilter?: boolean, event?: Event): void

selectItems

  • selectItems(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event): void

  • Select defined items

    Parameters

    • newItems: Array<any>

      new items to be selected

    • Optional clearCurrentSelection: boolean

      if true clear previous selected items

      this.combo.selectItems(["New York", "New Jersey"]);
    • Optional event: Event

    Returns void

selectedItems

  • selectedItems(): any[]

setSelectedItem

  • setSelectedItem(itemID: any, select?: boolean, event?: Event): void

  • Selects/Deselects a single item

    Parameters

    • itemID: any

      the itemID of the specific item

    • Default value select: boolean = true

      If the item should be selected (true) or deselected (false)

      Without specified valueKey;

      this.combo.valueKey = null;
const items: { field: string, region: string}[] = data;
this.combo.setSelectedItem(items[0], true);

      With specified valueKey;

      this.combo.valueKey = 'field';
const items: { field: string, region: string}[] = data;
this.combo.setSelectedItem('Connecticut', true);
    • Optional event: Event

    Returns void

toggle

  • toggle(): void

triggerCheck

  • triggerCheck(): void