Angular Material input components and directives

To use Angular material inputs, we have to understand different Angular material directives and components that are used with Angular form. Angular has a matInput directive that is supported by some of HTML native input but not all native HTML inputs. We used the input field to collect data from users.

We have three objectives behind this tutorial, first will learn how to use Angular material input directive matInput, where we can used it. Second we’ll look how used different material component like material form field, material hint, error , date picker, material select and material radio buttons. Last Angular material input design or appearance.

Setting up and configure Angular material Input project

Let first create our Angular material input project. In our previous articles, we had articles on how to install and the best approach of configuring Angular material in our project. Run the following command to create and add Angular Material to our project.

ng new materialInputExample
cd materialInputExample
ng add @angular/material
Angular material input example

While running the 3rd command will ask you the select theme, material typography, and animation, press yes on all. To use the Angular material component, we have to import it into our app module. Let create a module and import all material components on it.

ng g m ng-material

Open src/app/ng-material/ng-material.module.ts and replace the existing code with the code shown below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  exports: [
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class NgMaterialModule { }

We are importing all the required modules in our custom material module file and keeping separate modules for Angular material will make the application easy to maintain. Now we need to import our material module in our src/app/app.module.ts file.

...
import { NgMaterialModule } from './ng-material/ng-material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular material Input example

We have completed our configure of material input project. To use Angular material input design, we need to use Angular material matInput directive with mat-form-field. The matInput directive is enclosed in the mat-form-field component with mat-label.

The syntax of mat-form-field with matInput

<mat-form-field appearance="legacy">
   <mat-label>Color</mat-label>
   <input type="Name of Input type" matInput>
</mat-form-field>

We can’t use matInput directive on all HTML input types, Angular material matInput directive is supported in the following types of inputs:

  1. text
  2. password
  3. email
  4. tel
  5. url
  6. number
  7. search
  8. color
  9. date
  10. datetime-local
  11. month
  12. time
  13. week
  14. textarea

Angular material input color example

Here we had demonstrated a few examples of Angular material input examples.

Angular material input color
<mat-form-field class="example-full-width" appearance="outline">
   <mat-label>Color</mat-label>
   <input type="color" matInput value="#f6b73c">
</mat-form-field>

We can’t use the mat-form-field component on all input. The mat-form-field encapsulates the appearance, floating labels, hint text, and placeholders. We used Angular material input color with appearance outline.

Angular material input week and time

Second example we have an Angular material input example with input type week and time.

Angular material input example

Angular material input example

We have demonstrated a few examples of Angular material input types, now let demonstrate all input that supports matInput directive. Here is a screenshot of our example.

Angular material input example
Angular material input example 2
  <section>
    <h3>Angular material input support matInput directive</h3>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Input type text</mat-label>
      <input matInput placeholder="Enter textarea">
    </mat-form-field>
    <mat-form-field class="example-full-width" appearance="outline">

      <mat-label>Email</mat-label>
      <input type="email" matInput placeholder="Ex. [email protected]">
      <mat-hint>Errors appear instantly!</mat-hint>
    </mat-form-field>

    <div class="search">
      <mat-form-field appearance="outline" class="search">
        <mat-label>Input type search</mat-label>
        <input type="search" matInput style="display: inline;">
      </mat-form-field>
      <button mat-raised-button color="accent" style="display: inline;">Search</button>
    </div>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Color</mat-label>
      <input type="color" matInput value="#f6b73c">
    </mat-form-field>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Input type Password</mat-label>
      <input type="password" matInput>
    </mat-form-field>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Input type number</mat-label>
      <input type="number" matInput min="10" max="100">
    </mat-form-field>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Input type tel</mat-label>
      <input type="tel" matInput id="phone" name="phone" placeholder="Enter mobile number">
    </mat-form-field>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Input type url</mat-label>
      <input type="url" matInput name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30">
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Text area</mat-label>
      <textarea matInput rows="4" placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
      </mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Input type time</mat-label>
      <input type="time" matInput name="week" min="09:00" max="18:00">
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Input type week</mat-label>
      <input type="week" matInput name="week" id="camp-week" min="2021-W18" max="2021-W26">
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Input type month</mat-label>
      <input type="month" matInput min="2021-11" value="2022-05">
    </mat-form-field>
  </section>

Here we have listed some of the HTML input that doesn’t support the matInput directive.

  1. file
  2. image
  3. checkbox
  4. hidden
  5. radio
  6. range
  7. reset
  8. submit

Angular material input appearance attribute

The mat-form-field component supports some attribute, the appearance attribute has four values as follow an outline, fill, standard, and legacy. Here is a screenshot of Angular material input appearance.

Angular material input attributes
<section>
 <mat-form-field appearance="outline">
   <mat-label>Input Appearance Outline</mat-label>
   <input type="month" matInput min="2021-11" value="2022-05">
 </mat-form-field>

 <mat-form-field appearance="legacy">
   <mat-label>Input Appearance Legacy</mat-label>
   <input type="month" matInput min="2021-11" value="2022-05">
 </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>Input Appearance Standard</mat-label>
    <input type="month" matInput min="2021-11" value="2022-05">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Input Appearance Fill</mat-label>
    <input type="month" matInput min="2021-11" value="2022-05">
  </mat-form-field>
</section>

We can also use Angular material input float label attribute, it has three values float is the default, none, and always.

<mat-form-field floatLabel="never" appearance="outline">
   <mat-label>Input Appearance Outline</mat-label>
   <input type="month" matInput min="2021-11" value="2022-05">
</mat-form-field>

<mat-form-field floatLabel="always" appearance="legacy">
  <mat-label>Input Appearance Legacy</mat-label>
  <input type="month" matInput min="2021-11" value="2022-05">
</mat-form-field>

We have a tutorial on Angular material reactive form with validation, where we have used mat-hint and mat-error on field validation.

  1. How to implement Angular material form in Angular 11 | 12?

We also have other input where mat-form-field and matInput are not supported and here is the link.

  1. How to implement Angular Radio button ?
  2. How to implement Angular checkbox input in Angular 12 ?

Conclusion
We have completed Angular material input with a few examples. I hope you have got some idea on how to use the matInput directive in Angular form.

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top