ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read thegetting started topic.

The next step is to import theIgxInputGroupModule in yourapp.module.ts file.

// app.module.tsimport { FormsModule } from '@angular/forms';import { IgxInputGroupModule } from 'igniteui-angular';// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package@NgModule({    ...    imports: [..., IgxInputGroupModule, FormsModule],    ...})export class AppModule {}

Alternatively, as of16.0.0 you can import theIgxLabelDirective,IgxInputDirective, andIgxInputGroupComponent as standalone dependencies, or use theIGX_INPUT_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.tsimport { FormsModule } from '@angular/forms';import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package@Component({  selector: 'app-home',  template: `    <igx-input-group>      <input igxInput name="fullName" type="text" [(ngModel)]="fullName" />      <label igxLabel for="fullName">Full Name</label>    </igx-input-group>  `,  styleUrls: ['home.component.scss'],  standalone: true,  imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule],  /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */})export class HomeComponent {  public fullName = 'John Doe';}

Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using theigxLabel andigxInput directives and theigx-input-group component.

Using the Angular Label & Input

The default styling of the Label and Input directives follows the text fields specification in the Material Designguidelines.

To use theigxInput andigxLabel, you have to wrap them in an<igx-input-group> container:

<igx-input-group>  <input igxInput name="fullName" type="text" />  <label igxLabel for="fullName">Full Name</label></igx-input-group>

TheigxInput directive could be applied to<input> and<textarea> HTML elements, in both single-line and multi-line text fields.

Validation

We can validate aninput using therequired attribute. This will add an asterisk next to the label, indicating that this field must be completed. The input will turn green/red depending on whether the validation passes/fails.

<igx-input-group>  <input igxInput name="fullName" type="text" required="required" />  <label igxLabel for="fullName">Full Name</label></igx-input-group>

Data Binding

The Ignite UI for Angular Input directive supports both one-way and two-way data-binding. The following code illustrates how to add a two-way data-binding using theNgModel:

public user = {    fullName: ""};

in our markup:

<igx-input-group>  <input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required"/>  <label igxLabel for="fullName">Full Name</label></igx-input-group>

Focus & Text Selection

You can add logic to forcefocus on input elements using theigxFocus directive.

<igx-input-group>  <input igxInput [igxFocus]="isFocused" name="fullName" type="text" />  <label igxLabel for="fullName">Full Name</label></igx-input-group>

If you want the text in an input element, marked withigxInput, to be selected on focus, you have to enable theigxTextSelection directive.

<igx-input-group>  <input igxInput [igxTextSelection]="true" [igxFocus]="isFocused" name="fullName" type="text"/>  <label igxLabel for="fullName">Full Name</label></igx-input-group><igx-input-group>  <input igxInput [igxTextSelection]="true" name="email" type="text" />  <label igxLabel for="email">Email</label></igx-input-group>

Input Group

The Ignite UI for Angular Input Group component helps developers to create easy-to-use and aesthetic forms. For further information, you can read the separate topichere.

API References

• IgxLabelDirective
• IgxInputDirective
• IgxInputGroupComponent

Additional Resources

Related topics:

• Input Group

Our community is active and always welcoming to new ideas.

• Ignite UI for AngularForums
• Ignite UI for AngularGitHub