IgxAutocompleteDirective

Ignite UI for Angular Autocomplete - Documentation

The igxAutocomplete directive provides a way to enhance a text input by showing a drop down of suggested options, provided by the developer.

Example:

<input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/>
<igx-drop-down #townsPanel>
    <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
        {{town}}
    </igx-drop-down-item>
</igx-drop-down>

Constructors

new IgxAutocompleteDirective(): IgxAutocompleteDirective

Returns IgxAutocompleteDirective

Properties

autocompleteSettings

Provide overlay settings for the autocomplete drop down

// get
let settings = this.autocomplete.autocompleteSettings;

<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/>

// set
this.settings = {
 positionStrategy: new ConnectedPositioningStrategy({
     closeAnimation: null,
     openAnimation: null
 })
};

autocompleteSettings: AutocompleteOverlaySettings

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:116

disabled

Enables/disables autocomplete component

// get
let disabled = this.autocomplete.disabled;

<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteDisabled]="disabled"/>

// set
public disabled = true;

disabled: boolean = false

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:143

Inherited from: IgxDropDownItemNavigationDirective

dropdown: IgxDropDownBaseDirective

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:15

selectionChanging

Emitted after item from the drop down is selected

<input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' />

selectionChanging: EventEmitter<AutocompleteSelectionChangingEventArgs>

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:153

Accessors

activeDescendant

Inherited from: IgxDropDownItemNavigationDirective

get activeDescendant(): string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:57

Returns string

target

Sets the target of the autocomplete directive

<!-- Set -->
<input [igxAutocomplete]="dropdown" />
...
<igx-drop-down #dropdown>
...
</igx-drop-down>

get target(): IgxDropDownComponent

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:87

Returns IgxDropDownComponent

Gets the target of the navigation directive;

// Get
export class MyComponent {
 ...
 @ContentChild(IgxDropDownNavigationDirective)
 navDirective: IgxDropDownNavigationDirective = null
 ...
 const navTarget: IgxDropDownBaseDirective = navDirective.navTarget
}

set target(v: IgxDropDownComponent): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:90

Parameters

v: IgxDropDownComponent

Returns void

Methods

close

Closes autocomplete drop down

close(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:292

Returns void

ngAfterViewInit

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

ngAfterViewInit(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:332

Returns void

open

Opens autocomplete drop down

open(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:303