Home » Angular Material Inputs

Angular Material Inputs

by Online Tutorials Library

Angular Material Inputs

The angular material input-container is a used to contains any <input> or <textarea> element as a child. It also supports error handling using ng-message directives and animates messages using ngEnter / ngLeave events or ngShow / ngHide events.

The following table lists the parameters and descriptions of many attributes of the md-input-container.

Parameters Description
md-maxlength The working of md-maxlength is to show the full-length text. If you do not want counter text and only require “plain” verification, you can use “simple” NG-Maxlometer features.
aria-label It is used when the label is not present there. A warning message is seen in the console if the label is not present.
placeholder A placeholder is an approach that is used where the label is not present.
md-no-auto grow When md-no-auto grow will present there, textareas will not grow automatically.
md-detect-hidden Textarea will be the same size as it appears after being hidden when md-detect-hidden present. It is, by default, reverses every reflex cycle.

<input> and <textarea> Attributes

The attributes that are used with normal <input> and <textarea> elements can be used with elements inside <mat-form-field>. It has Angular directives such as ngModel and formControl.

Supported <input> Types

The following input types are used with matInput:

  • email
  • month
  • number
  • color
  • date
  • datetime-local
  • password
  • search
  • text
  • urltime
  • time
  • week
  • datetime-local

Form Field Features

There are a number of <mat-form-field> features that can be used with <textarea matInput>. They are error messages, hint text, prefix, suffix, and theming.


The placeholder text is shown when the input is empty and the label <mat-form-field> is floating. It is used to give the user hint about typing in the input. The placeholder can be specified by setting a placeholder text on the <input> or <textarea> element.

Changing when the error messages are shown

<mat-form-field> allows us to associate error messages with matInput. When the control is invalid then an error message will be shown, and either the user has interacted with the element, or the original form has been rendered.


The below example shows the use of md-input-container directive and the uses of inputs.


Test it Now


Angular Material Inputs

You may also like