Build Angular Material App. – CRUD Form Design

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.

ng new CompleteAngularMaterialApp

Install Angular Material and related packages.

# from project folder
cd CompleteAngularMaterialApp
npm i --s @angular/material @angular/cdk @angular/animations

@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.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

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

Application Structure

● src
+---● app
|   +--● employees
|   |  |--employees.component.ts|.html|.css
|   |  |
|   |  +--● employee
|   |  |  |--employee.component.ts|.html|.css
|   |  
|   +--● shared
|   |     |--employee.service.ts (form group)
|   |
|   |--app.module.ts

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).

ng g c employees
ng g c employees/employee

Now the corresponding service class – EmployeeService

ng g s employee

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.

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.

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.

Now update employee.component.html as follows.

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.

ng g m material

update material.module.ts as follows.

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

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.

4 – Form Validation

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

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

5 – Clear Form Controls

Wire up click event to clear button as follows.

Define the click event as follows.

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.

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

Now update the styles.css as follows.

div.container{
    margin: 0px 40px;
}
form.normal-form{
    margin: 10px;
}
.controles-container{
    width: 100%;
    padding: 5%;    
}
.controles-container > *,.full-width {
width: 100%;
}

/* radio group */
.add-bottom-padding{
    padding-bottom: 10px;
}

/* add gap b/w adjacent button */
 .button-row button{
    margin: 5px;
}
mat-radio-group mat-radio-button{
    margin-left: 5px;
}

.fill-remaining-space {
    /* This fills the remaining space, by using flexbox. 
       Every toolbar row uses a flexbox row layout. */
    flex: 1 1 auto;
  }

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.