In this tutorial, you’ll learn how to use Angular Material to style forms in your Angular 10 web application. We’ll use common components like form fields, input, label, date pickers, radio buttons and select.

We’ll particularly see how to use forms and date pickers by example.

We’ll be using the following Material components in this tutorial to style a form and its fields:

• The Card Material component via <mat-card>,
• The Form Field Material component via <mat-form-field>,
• The CheckBox Material component via <mat-checkbox>,
• The Input Material component via <input matInput> and <textarea matInput>,
• The Label Material component via <mat-label>,
• The Date Picker component via <mat-datepicker>,
• The Radio Button Material component via <mat-radio-button,
• The Select Material component via <mat-select>.

These are the most commonly needed fields in forms.

We assume you have Angular CLI 10 installed and you have created a project. Both these tasks can be easily done from your terminal using these two commands:

$ npm install @angular/cli -g # Install Angular CLI globally on your system
$ ng new mat-form-example # Create a project named mat-form-example 
  

#angular