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}}</td>
            <td>{{(c.component | async)?.cost | currency}}</td>
      </tbody>
    </table>
    <input type="number" [(ngModel)]="newTotal">
    <select [(ngModel)]="unit">
        <option>g</option>
        <option>oz</option>
        <option>kg</option>
        <option>lb</option>
    </select>
  </div>
</div>