Build Angular Material App. – CRUD Form Design

angular material sample project sample

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.

Install Angular Material and related packages.

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

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

Application Structure

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

Now the corresponding service class – EmployeeService

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.

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.

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.

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Vinay KumarShamseerHosein Ramazani Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Hosein Ramazani
Guest
Hosein Ramazani

how download your app?

Hosein Ramazani
Guest
Hosein Ramazani

Thanks for all.

Vinay Kumar
Guest
Vinay Kumar

Dear Author,

I’m making an app by following your tutorial but got struck at form edit option. I’m not able to populate form value in edit mode in popup.

Kindly help me out !!!!

Thanks in advance

Regards

vinay