Angular Material Design Components With Reactive Forms - Part One

Introduction

Today, in this article, I'm going to show you how to use Angular Material Design Component in your Angular app. Before that, you should know some basic structure of Angular app and its related functionality. In this part, we are going to see how to implement Reactive Forms with Angular 5.

Let’s start understanding how Angular Material works.

Step 1

Let’s create a new app using the following commands.

Note
Please make sure that you have the latest Node.js version already installed , and if not, go through the following link to download the latest version. Click Here To Download Latest Version Of Node.js

To check its versions, try the following command

• ng –v
• node –v

To check latest version of NPM,

•  npm –v

Now, create a new directory and our app inside it.

• Ng new angularmaterialform

And then, open it to VS Code editor by writing the following command.

• Code 

And you can see that the following structure is created.

Step 2

Now, you have the app created with you. Serve it using following command.

Ng serve

Now, go to localhost:4200. Your app is running there.

Step 3

So, let’s get started by configuring our app for Material design. Execute the following commands to install Angular Material.

1. Npm install –-save –g @angular/material
2. Npm install –-save –g @angular/cdk
3. Npm install –-save –g @angular/animations

As you can see, I have installed 3 main dependencies - material, its cdk, and its animations .

Note
We have installed animations because some of the Angular Material components are based on animation, like - swipe , zoom-in , zoom out etc .

So now, we have completely configured our app.

Step 4

In the next step, we use imports in our main module file [installed packages] , so that we can use it globally.

Here, I have pasted my module.ts file code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatFormFieldModule,
  MatInputModule,
  MatDatepickerModule,
  MatDatepicker,
  MatNativeDateModule,
  MatRadioModule,
  MatSelectModule,
  MatOptionModule,
  MatSlideToggleModule,ErrorStateMatcher,ShowOnDirtyErrorStateMatcher
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatRadioModule,
    MatSelectModule,
    MatOptionModule,
    MatSlideToggleModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatRadioModule,
    MatSelectModule,
    MatOptionModule,
    MatSlideToggleModule
  ],
  providers: [
    {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note
It is a best practice to create a separate module file for all Material Components that you are going to use.

As you can see, I have imported the browser animation module as well as we should also import all the components that we want to use in our project.

• MatButtonModule
• MatMenuModule
• MatToolbarModule
• MatIconModule
• MatCardModule
• MatFormFieldModule
• MatInputModule
• MatDatepickerModule
• MatDatepicker
• MatNativeDateModule
• MatRadioModule
• MatSelectModule
• MatOptionModule
• MatSlideToggleModule

So far, we have set up module.ts file with necessary components.

Step 5

Next step is to provide some look and feel to our Material Design app theme.

There are some pre-defined themes available. You can choose anyone from below.

1. Indigo-pink.css
2. Pink-bluegrey.css
3. Deeppurple-amber.css [I'm using this one]
4. Purple-green.css

Following is my styles.css [root src directory] code.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
.mat-card {
    text-align: -webkit-center;
}

.demo-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
}

.demo-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
}

.demo-full-width {
    width: 100%;
}

body {
    margin: 0;
    font-family: Roboto, sans-serif;
}

mat-card {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
}

mat-toolbar-row {
    justify-content: space-between;
}

.done {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
}

.content-center {
    text-align: -webkit-center;
}

Step 6

In addition to this, we can add gesture support to our app using HammerJS.

Why we need HammerJS ?

HammerJS is used mainly for adding gesture kind of effects support, like - Swipe, Zoom, rotate.

Execute the following command,

1. Npm install --save hammerjs

So, hammer.js will be installed on your machine successfully.

Do not forget to import it into main.ts file [Actually, it is the main entry point of Angular APP].

Like - import ‘hammerjs’;

Step 7

So, let's create a simple form using Angular Material Components. Find the below snippets for the same that I've created [app.component.html].

<!-- Main Toolbar of an App -->
<mat-toolbar color="accent">
    <span>Manav Pandya - C#Corner</span>
    <span class="demo-toolbar"></span>
    <button mat-button href="asp-dotnet-mvc-tutorials.blogspot.in">Go To My Blog</button>

</mat-toolbar>

<mat-card>
    <!-- Title of an Card -->
    <mat-card-title>
        Angular Material Component With Angular 5
    </mat-card-title>

    <mat-card-content>
        <form>
            <table>
                <tr>
                    <td>
                        <mat-form-field class="demo-full-width">
                            <input matInput placeholder="First Name">
                        </mat-form-field>
                    </td>
                    <td>
                        <mat-form-field class="demo-full-width">
                            <input matInput placeholder="Last Name">
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <mat-form-field class="demo-full-width">
                            <textarea matInput placeholder="Address" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <mat-form-field class="demo-full-width">
                            <input matInput [matDatepicker]="picker" placeholder="Date of birth">
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-datepicker touchUi="true" #picker></mat-datepicker>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Gender</span><br><br>
                        <mat-radio-group>
                            <mat-radio-button value="1">Male</mat-radio-button>
                            <mat-radio-button value="2">Female</mat-radio-button>
                        </mat-radio-group>
                    </td>
                    <td><br>
                        <mat-form-field>
                            <mat-select placeholder="Select Blog" [(value)]="selected">
                                <mat-option>-- Select Any --</mat-option>
                                <mat-option value="1">C#Corner</mat-option>
                                <mat-option value="2">C#Corner</mat-option>
                                <mat-option value="3">C#Corner</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <mat-form-field class="demo-full-width">
                            <input matInput placeholder="Email">
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">

                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="content-center">
                        <button mat-raised-button color="accent">Submit</button>
                        <button mat-raised-button color="accent">Clear</button>
                    </td>
                </tr>
            </table>
        </form>
    </mat-card-content>
</mat-card>

Code explanation

• <mat-form-field>
  This tag of Material component is container of html control , with the help of this we can define theme of an control, Like : accent , primary , warn etc .
  
  
• <mat-toolbar>
  In this part of the form, I have used Angular material toolbar module, it contains the title of the toolbar and a material button.
  
  
• <mat-card>
  In this section our actual form is contained, where I have used most of the Material Components.
  
  
• <mat-card-title>
  Provides the title of the card for display purpose.
  
  
• <mat-card-content>
  It contains actual content of an card element. And other controls as well like,

• <mat-radio-button> - For using radio button option
• <mat-datepicker> -To use Datepicker
• <mat-select> - To use Dropdown list of values
• <mat-option> - To provide different values to <mat-select>

Step 8

So far we have created a complete form using Angular material components

Let's try and run following command :

1. ng serve -o

And your application is running on your browser. You can see the following output.



As you can see, the above form looks good but till now, it's just an HTML form, and on submitting the form, nothing is going to happen.

Conclusion

So far, we have learned how to install and configure Angular Material Component and configure it. At last, we have created a basic form with many controls within it. In my upcoming article, we will learn the following.

• Reactive Form Introduction
• Implementation Of Reactive Form
• Validations & Form Submission

Stay tuned for Part-2.