website/src/app/app.component.html

<div>
  <div *ngFor="let f of formulas | async">
    <button (click)="displayFormula(f)">{{f.name}}</button>
  </div>
  <div *ngIf="formula">
    <table class="table">
      <thead>
        <tr>
          <td>Name</td>
          <td>Quantity</td>
          <td>Cost</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let c of formula.components">
          <td>{{(c.component | async)?.name}}</td>
          <td>{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
          <td>{{(c.component | async)?.cost | currency}}</td>
      </tbody>
    </table>
    <mat-form-field style="width: 75px">
      <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
    </mat-form-field>
    <mat-form-field style="width: 40px">
      <mat-select placeholder="Unit" [(ngModel)]="unit">
        <mat-option value="g">g</mat-option>
        <mat-option value="oz">oz</mat-option>
        <mat-option value="kg">kg</mat-option>
        <mat-option value="lb">lb</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>