Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxComboBaseDirective

Hierarchy

Hierarchy (View Summary)

Implements

  • AfterViewChecked
  • OnInit
  • AfterViewInit
  • AfterContentChecked
  • OnDestroy
  • ControlValueAccessor

Constructors

Properties

Accessors

Methods

Constructors

Properties

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 type="button" igxButton="contained" class="combo__add-button">
             Click to add item
         </button>
     </ng-template>
 </igx-combo>
addition: EventEmitter<IComboItemAdditionEvent> = ...

Emitted when an item is being added to the data collection

<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
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: string

Sets aria-labelledby attribute value.

<igx-combo [ariaLabelledBy]="'label1'">
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>
closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is closed

<igx-combo (closed)='handleClosed($event)'></igx-combo>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is closed

<igx-combo (closing)='handleClosing($event)'></igx-combo>
dataPreLoad: EventEmitter<IForOfState> = ...

Emitted when new chunk of data is loaded from the virtualization

<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
disabled: boolean = false

Disables the combo. The default is false.

<igx-combo [disabled]="'true'">
document: Document = ...
dropdown: IgxComboDropDownComponent
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>
filterFunction: (
    collection: any[],
    searchValue: any,
    filteringOptions: IComboFilteringOptions,
) => any[]

Gets/Sets the custom filtering function of the combo.

 <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo>

Type declaration

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: 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: 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>
itemsWidth: string

Configures the drop down list width

// get
let myComboItemsWidth = this.combo.itemsWidth;

<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>
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 let-item let-key="valueKey">
         <div class="custom-item">
             <div class="custom-item__name">{{ item[key] }}</div>
             <div class="custom-item__cost">{{ item.cost }}</div>
         </div>
     </ng-template>
 </igx-combo>
opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is opened

<igx-combo (opened)='handleOpened($event)'></igx-combo>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is opened

<igx-combo opening='handleOpening($event)'></igx-combo>
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: string

Defines the placeholder value for the combo value field

// get
let myComboPlaceholder = this.combo.placeholder;

<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>
searchInputUpdate: EventEmitter<IComboSearchInputEventArgs> = ...

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

<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
selectionChanging: EventEmitter<any>
showSearchCaseIcon: boolean = false

Defines whether the caseSensitive icon should be shown in the search input

// get
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;

<!--set-->
<igx-combo [showSearchCaseIcon]='true'></igx-combo>
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>
valueKey: string = null

Determines which column in the data source is used to determine the value.

// get
let myComboValueKey = this.combo.valueKey;

<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>
width: string

Sets the style width of the element

// get
let myComboWidth = this.combo.width;

<!--set-->
<igx-combo [width]='250px'></igx-combo>

Accessors

  • get groupKey(): string

    The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].

    // get
    let currentGroupKey = this.combo.groupKey;

    Returns string

  • set groupKey(val: string): void

    The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].

    <!--set-->
    <igx-combo [groupKey]='newGroupKey'></igx-combo>

    Parameters

    • val: string

    Returns void

Methods

  • Writes a new value to the element.

    This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

    The following example writes a value to the native DOM element.

    writeValue(value: any): void {
      this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
    }

    Parameters

    • value: any

    Returns void