Angular Material Input

In this lecture let's take a look at the component related at and input in angular material, when it comes to controls like inputs, textareas and select we always discuss them in relation to a common wrapper component and that is the form field component.

So when we talk about an input component you're effectively talking about the form field component and the input component let's take a closer look at both those component in this lecture.

The first step is to import the two concerned components, so in material.module.ts.

import { MatFormFieldMosule, MatInputModule } from '@angular/material';

MaterialComponents = [
    MatFormFieldModule,
    MatInputModule
];

No we can create our first input control so in app.component.html I'm going to add mat-form-field and within this component I'm gonna add <input matInput>, please make not that every input element has to have this form field wrapper and to the input element itself we add the matInput attribute.

<mat-form-field>
  <input matInput />
</mat-form-field>

Angular Material Input Control Now if you save and take a look at the browser you can see that we the most basic material input element, let's see how we can customize this angular material input control.

Angular Material Customize Input Control

First up let's see how to add a label to the <input> field, to add a label use the mat-label component within the mat-form-field tag.

<mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput />
</mat-form-field>

Angular Material Input Control label If you save and take a look the browser you can see the label it behaves as a placeholder when there is no text, start typing and the label floats to the top and this is the default behavior we can of course change this. O on the mat-form-field make use of floatLabel attribute to control the behavior of the label.

So floatLabel can be set to never floatLabel="never" in which case a label will not float and is hidden if we start typing something.

You can also set it to always floatLabel="always" in which case the label is floating even when there is no text in the input.

You can also set it auto floatLabel="auto" which is the default value.

Another important point is how the label is presented for a required form field so if I mark the input element as required.

<mat-form-field floatLabel="auto">
  <mat-label>Name</mat-label>
  <input matInput required />
</mat-form-field>

angular input required You can see that now the label has the asterisk automatically appended no additional styling is required if you want to disable this behavior you can make use of the hideRequiredMarker on the <mat-form-field>

<mat-form-field floatLabel="auto" hideRequiredMarker>
  <mat-label>Name</mat-label>
  <input matInput required />
</mat-form-field>

Go back to the browser the asterisk is not present for a required field.

The next thing we can do with the mat-form-field is setting a hint label for that we make use of the mat-hint component so within the form field I'm going to add this component.

<mat-form-field floatLabel="auto">
  <mat-label>Name</mat-label>
  <input matInput required />
  <mat-hint>Min 5 characters</mat-hint>
</mat-form-field>

angular material mat hint If you take look at the browser you can see that the hint is placed right below the input and by default is left aligned we can right aligned using the align attribute and setting it to a value of end.

<mat-hint align="end">Min 5 characters</mat-hint>

Angular Material Input appearance

We can control the appearance of the form field using the appearance attribute, by default the appearance has a value of legacy which is what we have seen so far.

We also have an appearance value of standard and it's just an updated version with more consistent spacing so let's try this appearance.

<mat-form-field floatLabel="auto" appearance="standard">
  <mat-label>Name</mat-label>
  <input matInput required />
  <mat-hint align="end">Min 5 characters</mat-hint>
</mat-form-field>

If you save and go to the browser you can see that there is slight difference in how spacing is for the standard appearance.

We still have two more appearances fill and outline so let's try the fill appearance.

<mat-form-field floatLabel="auto" appearance="fill">
  <mat-label>Name</mat-label>
  <input matInput required />
  <mat-hint align="end">Min 5 characters</mat-hint>
</mat-form-field>

angular material input appearance The fill appearance displays the form field with a filled background.

No let's see the outline appearance.

<mat-form-field floatLabel="auto" appearance="outline">
  <mat-label>Name</mat-label>
  <input matInput required />
  <mat-hint align="end">Min 5 characters</mat-hint>
</mat-form-field>

angular material fill appearance The outline appearance shows the form field filled with a border all the way around and not just an underline.

Angular Material Input Control Theming

By default the colors reflect the primary color of the theme we can set the color attribute to accent and also warn if required, so on the mat-form-field.

<mat-form-field floatLabel="auto" appearance="outline" color="accent">
  <mat-label>Name</mat-label>
  <input matInput required />
  <mat-hint align="end">Min 5 characters</mat-hint>
</mat-form-field>

Angular Material Input Control Theming

Now on a side note please go through the documentation on how to incorporate error messages with form fields it requires a bit of knowledge on Angular forms concepts, the documentation is pretty clear so you should be in a good position.

All right that is about the input control wrapped inside a form field component in angular material.