Property that enables/disables the auto-generated class of the IgxInputGroupComponent.
By default applied the class is applied.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
this.inputGroup.defaultClass = false;
}
Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).
Automatic focus causes software keyboard to show on mobile devices.
<igx-input-group [suppressInputAutofocus]="true"></igx-input-group>
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Returns whether the IgxInputGroupComponent has border.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let inputBorder = this.inputGroup.hasBorder;
}
Returns whether the IgxInputGroupComponent has hints.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let inputHints = this.inputGroup.hasHints;
}
Returns true if the IgxInputGroupComponent theme is Bootstrap.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
}
Returns whether the IgxInputGroupComponent type is border.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeBorder = this.inputGroup.isTypeBorder;
}
Returns whether the IgxInputGroupComponent type is box.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeBox = this.inputGroup.isTypeBox;
}
Returns true if the IgxInputGroupComponent theme is Fluent.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeFluent = this.inputGroup.isTypeFluent;
}
Returns true if the IgxInputGroupComponent theme is Indigo.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeIndigo = this.inputGroup.isTypeIndigo;
}
Returns whether the IgxInputGroupComponent type is line.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeLine = this.inputGroup.isTypeLine;
}
Returns whether the IgxInputGroupComponent type is search.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let isTypeSearch = this.inputGroup.isTypeSearch;
}
Returns the resource strings.
Sets the resource strings. By default it uses EN resources.
Returns the theme of the input. The returned value is of type IgxInputGroupType.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit() {
let inputTheme = this.inputGroup.theme;
}
Sets the theme of the input. Allowed values of type IgxInputGroupTheme.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit() {
let inputTheme = 'fluent';
}
Returns the type of the IgxInputGroupComponent. How the input is styled.
The default is line.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
let inputType = this.inputGroup.type;
}
Sets how the input will be styled. Allowed values of type IgxInputGroupType.
<igx-input-group [type]="'search'">
Sets the --component-size CSS variable based on the value of Display Density
Defines the end input for a date range picker
Igx Module
IgxDateRangePickerModule
Igx Theme
igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
Igx Keywords
date, range, date range, date picker
Igx Group
scheduling
Remarks
When templating, end input has to be template separately
Example