<nav class="navbar navbar-inverse" style="padding-top:10px;padding-left:10px;font-size:x-large;color:white">{{title}}</nav>

<div style="padding:10px">
<label style="color:orangered;font-size:large">Want to add a contact?</label>
<p> </p>
<form #f="ngForm" (ngSubmit)="buttonClicked(newContact)">
  <input class="form-control" required style="width:18%;display:inline" name="first" [(ngModel)]="newContact.first"   placeholder="First name">
  <label style="color:red;padding-right:5px">*</label>
  <input class="form-control" required style="width:18%;display:inline" name="last" [(ngModel)]="newContact.last" placeholder="Last name">
  <label style="color:red;padding-right:5px">*</label>
  <input class="form-control"  style="width:18%;display:inline" name="email" [(ngModel)]="newContact.email" placeholder="Email(optional)">
  <label style="color:red;padding-right:10px"></label>
  <input class="form-control" required style="width:18%;display:inline" name="phone" [(ngModel)]="newContact.phone" placeholder="Phone number">
  <label style="color:red;padding-right:10px">*</label>
  <button type="button" class="btn btn-warning"
          ng-reflect-trigger=""
          ng-reflect-centered="false"
          style="display:inline;height:50px;width:50px;border-radius:25px;border-width:unset;text-align:center;font-size:x-large"
          (click)="buttonClicked(newContact)">
    +
  </button>
  <p></p>
  <label style="color:green;font-size:large">Or search by any value:</label>
  <input (keyup)="onSearch($event)" class="form-control" style="width:80%;padding:10px" name="searchPhrase" ng-model="searchPhrase" placeholder="Search for...">
  <p style="padding:10px"></p>
</form>


<table ng-Table="tablelist" class="table table-striped table-bordered table-hover table-condensed" style="width:80%" border="1" cellpadding="20">
  <tr>
    <th style="width:20%;background-color:dodgerblue;color:white">First Name</th>
    <th style="width:20%;background-color:dodgerblue;color:white">Last Name</th>
    <th style="width:20%;background-color:dodgerblue;color:white">Email</th>
    <th style="width:20%;background-color:dodgerblue;color:white">Phone number</th>
  </tr>
  <tr *ngFor="let value of apiValues">
    <td>{{value.first}}</td>
    <td>{{value.last}}</td>
    <td>{{value.email}}</td>
    <td>{{value.phone}}</td>
  </tr>

</table>


  </div>

