Cacher is the code snippet organizer for pro developers

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

<button (click) = "logThem()">Log objects</button>

<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="">
          <option *ngFor="let item of supplier.items" value="{{item.price}}">{{item.description}}</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>