EmployeeList.html

<div class="container">  
  <input type="button" class="btn btn-primary" (click)="loadAddnew()" data-toggle="modal" data-target="#myModal" value="Create New">  
  <hr>  
  <div *ngIf="!dataavailbale">  
  
    <h4> No Employee Data is present Click Add new to add Data.</h4>  
  </div>  
  
  <table class="table" *ngIf="dataavailbale">  
    <thead>  
      <tr>  
        <th scope="col">Sr.No</th>  
        <th scope="col">First name</th>  
        <th scope="col">Last Name</th>  
        <th scope="col">Email</th>  
        <th scope="col">Gender</th>  
        <th scope="col" style="align-content: center">Action</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr *ngFor="let e of emplist let i = index ">  
        <td scope="col">{{i+1}}</td>  
        <td scope="col">{{e.fname}}</td>  
        <td scope="col">{{e.lname}}</td>  
        <td scope="col">{{e.email}}</td>  
        <td scope="col">{{e.gender=="1"?'Male':'Female'}}</td>  
        <td style="display:none">{{e.id}}</td>  
        <td scope="col">  
          <button type="button" class="btn btn-default btn-primary" (click)="loadnewForm(e.id,e.email,e.fname,e.lname,e.gender)"  
            data-toggle="modal" data-target="#myModaledit">  
            <span class="glyphicon glyphicon-edit"></span> Edit  
          </button>  
          |  
          <button type="button" class="btn btn-default btn-danger" (click)="deleteconfirmation(e.id)">  
            <span class="glyphicon glyphicon-trash"></span> Delete  
          </button>  
  
        </td>  
      </tr>  
    </tbody>  
  </table>  
  
  <div id="myModal" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal">×</button>  
          <h4 class="modal-primary">Employee Add</h4>  
        </div>  
        <div class="modal-body">  
  
          <app-employee-add #empadd (nameEvent)="RefreshData($event)"></app-employee-add>  
  
        </div>  
        <div class="modal-footer">  
          <button type="button" #closeBtn class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
      </div>  
  
    </div>  
  </div>  
  
  <div id="myModaledit" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal">×</button>  
          <h4 class="modal-title">Edit</h4>  
        </div>  
        <div class="modal-body">  
          <app-employeeupdate (nameEvent)="RefreshData($event)" [isReset]="resetForm" #regForm></app-employeeupdate>  
        </div>  
        <div class="modal-footer">  
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
      </div>  
  
    </div>  
  </div>