Angular Label & Input Directives Overview

The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an igx-input-group component.

Angular Label & Input Example

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

Getting Started with Ignite UI for Angular Label & Input

To get started with the Ignite UI for Angular Label and Input directives, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular
cmd

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

The next step is to import the IgxInputGroupModule in your app.module.ts file.

// app.module.ts

import { 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 {}
typescript

Alternatively, as of 16.0.0 you can import the IgxLabelDirective, IgxInputDirective, and IgxInputGroupComponent as standalone dependencies, or use the IGX_INPUT_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { 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';
}
typescript

Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the igxLabel and igxInput directives and the igx-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 Design guidelines.

To use the igxInput and igxLabel, 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>
html

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

Validation

We can validate an input using the required 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>
html

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 the NgModel:

public user = {
    fullName: ""
};

typescript

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>
html

Focus & Text Selection

You can add logic to force focus on input elements using the igxFocus directive.

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

To use the igxFocus directive, you have to import the IgxFocusModule.

If you want the text in an input element, marked with igxInput, to be selected on focus, you have to enable the igxTextSelection 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>
html

To use the igxTextSelection directive, you have to import the IgxTextSelectionModule.

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 topic here.