With this article we have started the series – Build a Complete Angular Material App. From Scratch, In this part we will design a form in Angular Material containing frequently used CRUD components – input text box, dropdown, check box, radio button etc.

GitHub Link : https://goo.gl/d6y8yf.

What is Angular Material ?

Angular Material is a package/ tool for angular developers, It contains a set of high-quality UI components based on Google Material Design Concept.

Here we will demonstrate the use of Angular Material Components with practical examples rather than like the official documentation. You can see the component-wise Angular Material documentation here : https://material.angular.io.
In upcoming articles we’ll cover angular material datatable – sorting, paging and filtering. pop up, notification, etc.

Let’s start from scratch.

1 – Initiation and Installation of Angular Material

Create new angular project with following Angular CLI command.

Copy to Clipboard

Install Angular Material and related packages.

Copy to Clipboard

@angular/material : main package
@angular/cdk : developer kit for developers
@angular/animations : enables animation

Now let’s add material theme and icon,

Available pre-built themes:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

First we have to add theme stylesheet into styles.css.

Copy to Clipboard

let’s add material icon style sheet reference in index.html

Copy to Clipboard
Application Structure
Copy to Clipboard

In this application, we’ll deal with details of an employee – Full Name, Mobile, Email, City, Gender, Department, Join Date and Type of Job.

Let’s start with creating components : employees (parent component) and employee (child component).

Copy to Clipboard

Now the corresponding service class – EmployeeService

Copy to Clipboard

2 – Define Form Group

We’ll design the form using Reactive Forms approach, so first we have to define form group for angular material form in employee.service.ts as follows.

Copy to Clipboard

We have initialized the form group property with properties related to employee. Inside FormControl constructors we have passed default values for each control. $key will be used as primary key for each employee record.

Now we have to inject the service class in app.module.ts as follows.

Copy to Clipboard

3 – Design Form in Angular Material

We’ll design the CRUD form in employee component. so first inject the service class in employee.component.ts file.

Copy to Clipboard

Now update employee.component.html as follows.

Copy to Clipboard

Inside this form we have few angular material components. In-order to work these material components we have to import corresponding classes. For that I’ll create a separate module.

Copy to Clipboard

update material.module.ts as follows.

Copy to Clipboard

Now import this module inside default module – app.module.ts.

Copy to Clipboard

Along with that we have imported animation module – BrowserAnimationsModule, which is a must for angular material component default animations.

Inside the form html, we have shown the dropdown from a static array, It is defined in EmployeeComponent class as follows.

Copy to Clipboard

4 – Form Validation

In-order to implement the validation, we have to update the form group in service class.

Copy to Clipboard

In-order to show validation error indication, we have to update corresponding control html as follows.

Copy to Clipboard

5 – Clear Form Controls

Wire up click event to clear button as follows.

Copy to Clipboard

Define the click event as follows.

Copy to Clipboard

reset function will clear all controls, but we have to the primary key($key) value as before. Because we’ll be using this same employee form for insert and update operation. we want to keep the $key value during update operation so that’s why we have this extra work for $key.

initializeFormGroup function reset the controls to their default values . It is defined in service class as follows.

Copy to Clipboard

Now in-order to see these changes, we have to update app.component.html and employees.component.html.

Copy to Clipboard

Now update the styles.css as follows.

Copy to Clipboard

Step By Step Video Tutorial

In the next part we’ll implement firebase CRUD operations with this form, before that we will convert the static department dropdown to dynamic using firebase collection.