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.

    Label & Input Demo

    Usage

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

    Note

    To use igxInput and igxLabel, you have to wrap them in an <igx-input-group> container.

    To get started with the Ignite UI for Angular Label & Input, let's first import the IgxInputGroupModule in our app.module.ts file:

    // app.module.ts

...
import { IgxInputGroupModule } from 'igniteui-angular';

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

    Label & Input

    HTML labels and inputs are the core building blocks of the HTML forms. Here is how you can use the igxLabel and igxInput directives:

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

    And the result is:

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

    Validation

    Ignite UI for Angular Input directive provides a Material-based styling when you have validation. Let's add required attribute to our input:

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

    In the demonstration of the code below you can see we receive an asterisk next to the label and the input turns green/red when we write in it depending on whether the validation passes/fails.

    Data Binding

    Ignite UI for Angular Input supports one-way and two-way data-binding. Let's add a two-way data-binding to our input. Here is the code in our component:

    public user = {
    fullName: ""
};

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

    Input Group

    You can read about the Input Group component in a separate topic here.

    API References

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.