How to perform Employee Registration Form and display records in table in Angular 2

In this article we will see how fill the employee registration form and display the data in table.

First we need to configure of in visual studio. So already I explained how to install typescript and configuration of reference file of angular js in V.S
For this you can go this link

Here we will use service in angular 2. So just see short description about service 

Service is a JavaScript function, including its related properties and methods which can perform a particular task or a group of tasks. Service is a mechanism to use shared responsibilities within one or multiple components.
We will go in visual studio and create a folder app in src folder or we can modify. 

So now first right click of app folder and add a Typescript file and give the name app.service.employee.ts and write below code.

import { Injectable } from "@angular/core";

@Injectable()

export class EmployeeService {

    private employeeList: Array<any> = [];

    constructor() {

        this.employeeList = [{ name: 'mithilesh kumar', emailId: "mithilesh@gmail.com", address: 'Hyderabad', dateOfBirth: '01-01-1990',mobileNo: '8723623232',pineCode : '123456' }];

    }

    EmployeeDetails(): Array<any> {

        return this.employeeList;

    }

    addEmployeeDetails(item: any): void {

        this.employeeList.push(item);

    } 

}   

Again right click of app folder and add a Typescript file and give the name app.component.employee.ts and write below code.

import { Component, OnInit, ViewChild } from '@angular/core';

import { EmployeeService } from './app.service.employee';

@Component({

    moduleId: module.id,

    selector: 'employee-details',

    templateUrl: 'app.component.employee.html',

    providers: [EmployeeService]

})

export class EmployeeComponent implements OnInit {

    private model: any = {};

    private details: Array<any>;

    constructor(private service: EmployeeService) {

        this.details = this.service.EmployeeDetails();

    }

    ngOnInit(): void {

    }

    private submit(): void {

        if (this.validate()) {

            this.service.addEmployeeDetails(this.model);

            this.reset();

        }

    }

    private reset(): void {

        this.model = {};

    }

    private validate(): boolean {

        debugger;

        let status: boolean = true;

        if (typeof (this.model.name) === "undefined") {

            alert('Employee name is required');

            status = false;

            return;

        }

        else if (typeof (this.model.emailId) === "undefined") {

            alert('Email Id is required');

            status = false;

            return;

        }

        else if (typeof (this.model.address) === "undefined") {

            alert('Address is required');

            status = false;

            return;

        }

        else if (typeof (this.model.dateOfBirth) === "undefined") {

            alert('Date of Birth is required');

            status = false;

            return;

        }

        else if (typeof (this.model.mobileNo) === "undefined") {

            alert('Mobile Number is required');

            status = false;

            return;

        }

        else if (typeof (this.model.pineCode) === "undefined") {

            alert('pine code is required');

            status = false;

            return;

        }

        return status;

    }

}

 Again right click of app folder and add an HTML file and give the name app.component.employee.html and write below code.

<style>

    td {

        padding: 8px;

    }

</style>

<div class="row">

    <div class="col-md-3"></div>

    <div class="col-md-6">

        <h2 align="center">Employee registration form</h2>

        <hr />

        <table class=" table-bordered" style="width:80%;">

            <tr>

                <td>Employee Name</td>

                <td><input type="text" class="form-control" [(ngModel)]="model.name" /></td>

            </tr>

            <tr>

                <td>Email Id</td>

                <td><input type="text" class="form-control" [(ngModel)]="model.emailId" /></td>

            </tr>

            <tr>

                <td>Address</td>

                <td><input type="text" class="form-control" [(ngModel)]="model.address" /></td>

            </tr>

            <tr>

                <td>Date Of Birth</td>

                <td><input type="date" class="form-control" [(ngModel)]="model.dateOfBirth" /></td>

            </tr>

            <tr>

                <td>Mobile Number</td>

                <td><input type="number" class="form-control" [(ngModel)]="model.mobileNo" /></td>

            </tr>

            <tr>

                <td>Pine Code</td>

                <td><input type="text" class="form-control" [(ngModel)]="model.pineCode" /></td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <input type="button" class="btn btn-primary" value="Submit" (click)="submit()" />

                    <input type="button" class="btn btn-danger" value="Reset" (click)="reset()" />

                </td>

            </tr>

        </table>

        <h3>Employee Details</h3>

        <div class="ibox-content">

            <div class="ibox-table">

                <div class="table-responsive">

                    <table class="responsive-table table-striped table-bordered table-hover">

                        <thead>

                            <tr class="btn-primary">

                                <th style="width:30%;">

                                    <b>Employee Name</b>

                                </th>

                                <th style="width:15%;">

                                    <b>Emaild Id</b>

                                </th>

                                <th style="width:15%;">

                                    <b>Address</b>

                                </th>

                                <th style="width:15%;">

                                    <b>Date of Birth</b>

                                </th>

                                <th style="width:15%;">

                                    <b>Mobile Number</b>

                                </th>

                                <th style="width:10%;">

                                    <b>Pine Code</b>

                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr *ngFor="let item of details; let i=index">

                                <td><span>{{item.name}}</span></td>

                                <td><span>{{item.emailId}}</span></td>

                                <td><span>{{item.address}}</span></td>

                                <td><span>{{item.dateOfBirth}}</span></td>

                                <td><span>{{item.mobileNo}}</span></td>

                                <td><span>{{item.pineCode}}</span></td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

Again right click of app folder and add a Typescript file and give the name app.module.ts and write below code.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from "@angular/forms";

import { EmployeeComponent } from './app.component.employee';

@NgModule({

    imports: [BrowserModule, FormsModule],

    declarations: [EmployeeComponent],

    bootstrap: [EmployeeComponent]

})

export class AppModule { }   

Now modify the directive in index.html page

<body>

    <employee-details>Please wait Angular application is loading ...</employee-details>

</body>

see the final code of index.html below

<!DOCTYPE html>

<html>

<head>

    <title>Angular QuickStart</title>

    <base href="/src/">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="styles.css" rel="stylesheet" />

    <link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

    <!-- Polyfill(s) for older browsers -->

    <script src="../node_modules/jquery/dist/jquery.js"></script>

    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>

    <script src="../node_modules/core-js/client/shim.min.js"></script>

    <script src="../node_modules/zone.js/dist/zone.js"></script>

    <script src="../node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>

    <script>

        System.import('main.js').catch(function (err) { console.error(err); });

    </script>

</head>

<body>

    <employee-details>Please wait Angular application is loading ...</employee-details>

</body>

</html>

Now see the Output

First, we will check validation 

 After that, we will check insert functionality

After clickinging the submit button we will see the result