<div class="container">
  <h1>Add New User</h1>
  <form (ngSubmit)="userSubmit()" #addform="ngForm">
    <div class="form-group">

      <label for="firstname">FirstName</label>

      <input type="text" [(ngModel)]="model.firstname" name="firstname" class="form-control" id="firstname" required #firstname="ngModel">

    </div>
    <div [hidden]="firstname.valid || firstname.pristine" class="alert alert-danger">

      Firstname is required

    </div>

    <div class="form-group">

      <label for="lastname">LastName</label>

      <input type="text" [(ngModel)]="model.lastname" name="lastname" class="form-control" id="lastname" required #lastname="ngModel">

    </div>
    <div [hidden]="lastname.valid || lastname.pristine" class="alert alert-danger">

      Lastname is required

    </div>
    <div class="form-group">

      <label for="mobile_no">Mobile Number</label>
      <input type="text" [(ngModel)]="model.mobile_no" name="mobile_no" class="form-control" id="mobile_no" required #mobileno="ngModel">

    </div>
    <div [hidden]="mobileno.valid || mobileno.pristine" class="alert alert-danger">

      Mobile number is required

    </div>



    <button type="submit" class="btn btn-default form-control" [disabled]="!addform.form.valid">Add User</button>

  </form>
</div>

<hr>
<div class="container" *ngIf="arr.length>0;else noData">
  <ul *ngFor="let item of arr" class="list-group">
    <li class="list-group-item">
      <strong>{{item.firstname}}{{item.lastname}}</strong> : {{item.mobile_no}}

      <a (click)="onDelete(item)" >

        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
      </a>

    </li>

  </ul>

</div>
<div class="container">
  <ng-template #noData>
    <hr>
    <h5>There are no users to display</h5>
  </ng-template>
</div>