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;

disabled

Section titled "disabled" 
disabled: boolean

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

required

Section titled "required" 
required: boolean

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

valid

Section titled "valid" 
valid: IgxInputState

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

value

Section titled "value" 
value: any

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

Accessors

Section titled "Accessors"

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

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();