Cacher is the code snippet organizer for pro developers

<form #supplier = "ngForm" class="" id="supplier">
  <div class="form-group">
  <label>Supplier name:</label> <input type="text" [(ngModel)]="supplier.name" name="name" id="name" class="form-control">
  <label for="">Supplier phone:</label> <input type="text" [(ngModel)]="supplier.phone" name="phone" id="phone" class="form-control">
</div>
  <!-- <button (click)="logSupplier(supplier)">Log supplier</button> -->
  <button (click)="newSupplier(supplier.value)" class="btn btn-sm btn-primary">Create supplier</button>
  {{supplier.value | json}}
</form>
<br><br>
<form #item = "ngForm">
  <div class="form-group">
  <label for="">Item desc:</label> <input type="text" [(ngModel)]="item.description" name="description" class="form-control">
  <label for="">Item price:</label> <input type="text" [(ngModel)]="item.price" name="price" class="form-control">
  <label for="">Supplier</label> 
  <select [(ngModel)]="item.supplier" name="supplier" class="form-control">
    <option value="" selected>Select a supplier</option>
    <option *ngFor="let supplier of suppliers" [value]="supplier.id">{{supplier.name}}</option>
  </select>
</div>
  <button (click)="newItem(item.value)" class="btn btn-sm btn-primary">Create Item</button>
  {{item.value | json}}
</form>

<!-- <button (click) = "logThem()">Log objects</button> -->
<form class="form-group" #search = "ngForm">
  <label for="">Name: </label><input type="text" [(ngModel)]="search.name" name="name" (keyup)="filter(search.value)" class="form-control">
  <label for="">Phone: </label><input type="text" [(ngModel)]="search.phone" name="phone" (keyup)="filter(search.value)" class="form-control">
  
</form>
<table class="table">
  <thead>
    <tr>
      <th>Supplier id</th>
      <th>Supplier name</th>
      <th>Supplier phone</th>
      <th>Supplier items</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let supplier of suppliers">
      <td>{{supplier.id}}</td>
      <td>{{supplier.name}}</td>
      <td>{{supplier.phone}}</td>
      <td>
        <select name="" id="" class="form-control">
          <option *ngFor="let item of supplier.items" value="{{item.price}}">{{item.description}}</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<!-- <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate" ></div><br> -->

<app-pagination
[initial]="1"
[count]="supplierCount"
[page]="currentPage"
[perPage]="xRows"
[pagesToShow]="pagesToShow"
[loading]="loads"
(goPrev)="prevPage()"
(goNext)="nextPage()"
(goPage)="goToPage($event)"></app-pagination>