Label & Input

    The Ignite UI for Angular Input and Label directives are used to create single-line or multi-line text elements. They help to cover common scenarios when dealing with form inputs.

    Angular Label & Input Example

    Usage

    To get started with the Input and Label directives, first you need to import the IgxInputGroupModule in your app.module.ts file:

    // app.module.ts

...
import { IgxInputGroupModule } from 'igniteui-angular';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxInputGroupModule],
    ...
})
export class AppModule {}

    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>

    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>

    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: ""
};

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

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

    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.

    API References

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.