The igxInput directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs.
Igx Module
IgxInputGroupModule
Igx Theme
igx-input-group-theme
Igx Keywords
input, input group, form, field, validation
Igx Group
presentation

Example

<input-group>
 <label for="address">Address</label>
 <input igxInput name="address" type="text" [(ngModel)]="customer.address">
</input-group>

Constructors

Section titled "Constructors"

IgxInputDirective 

new IgxInputDirective(): IgxInputDirective

Returns IgxInputDirective

Properties

Section titled "Properties"

inputGroup

Section titled "inputGroup" 
inputGroup: IgxInputGroupBase

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:54

isInput

Section titled "isInput"

Sets/gets whether the "igx-input-group__input" class is added to the host element. Default value is false.

 
isInput: boolean = false

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:76

Example

this.igxInput.isInput = true;

isTextArea

Section titled "isTextArea"

Sets/gets whether the "class.igx-input-group__textarea" class is added to the host element. Default value is false.

 
isTextArea: boolean = false

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:92

Example

this.igxInput.isTextArea = true;

Accessors

Section titled "Accessors"

disabled

Section titled "disabled"

Gets the disabled property

 
get disabled(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:162

Example

@ViewChild('igxInput', {read: IgxInputDirective})
 public igxInput: IgxInputDirective;
let isDisabled = this.igxInput.disabled;

Returns boolean

Sets the disabled property.

 
set disabled(value: boolean): void

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:145

Example

<input-group>
 <input igxInput #igxInput [disabled]="true">
</input-group>

Parameters

  • value: boolean

Returns void

focused

Section titled "focused"

Gets whether the igxInput is focused.

 
get focused(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:453

Example

let isFocused = this.igxInput.focused;

Returns boolean

hasPlaceholder

Section titled "hasPlaceholder"

Gets whether the igxInput has a placeholder.

 
get hasPlaceholder(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:415

Example

let hasPlaceholder = this.igxInput.hasPlaceholder;

Returns boolean

isValid

Section titled "isValid"

Gets whether the igxInput is valid.

 
get isValid(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:488

Example

let valid = this.igxInput.isValid;

Returns boolean

nativeElement

Section titled "nativeElement"

Gets the nativeElement of the igxInput.

 
get nativeElement(): HTMLInputElement

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:348

Example

let igxInputNativeElement = this.igxInput.nativeElement;

Returns HTMLInputElement

placeholder

Section titled "placeholder"

Gets the placeholder element of the igxInput.

 
get placeholder(): string

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:426

Example

let igxInputPlaceholder = this.igxInput.placeholder;

Returns string

required

Section titled "required"

Gets whether the igxInput is required.

 
get required(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:189

Example

let isRequired = this.igxInput.required;

Returns boolean

Sets the required property.

 
set required(value: boolean): void

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:177

Example

<input-group>
 <input igxInput #igxInput required>
</input-group>

Parameters

  • value: boolean

Returns void

valid

Section titled "valid"

Gets the state of the igxInput.

 
get valid(): IgxInputState

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:464

Example

let igxInputState = this.igxInput.valid;

Returns IgxInputState

Sets the state of the igxInput.

 
set valid(value: IgxInputState): void

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:476

Example

this.igxInput.valid = IgxInputState.INVALID;

Parameters

Returns void

value

Section titled "value"

Gets the value property.

 
get value(): any

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:130

Example

@ViewChild('igxInput', {read: IgxInputDirective})
 public igxInput: IgxInputDirective;
let inputValue = this.igxInput.value;

Returns any

Sets the value property.

 
set value(value: any): void

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:116

Example

<input-group>
 <input igxInput #igxInput [value]="'IgxInput Value'">
</input-group>

Parameters

  • value: any

Returns void

Methods

Section titled "Methods"

focus

Section titled "focus"

Sets a focus on the igxInput.

 
focus(): void

Defined in projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:337

Returns void

Example

this.igxInput.focus();