brewman/overlord/src/app/product/product-detail/product-detail-dialog.component.html

<h1 mat-dialog-title>Edit Product SKU</h1>
<div mat-dialog-content>
  <form [formGroup]="form">
    <div
      class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col"
    >
      <mat-form-field class="flex-auto mr-5">
        <mat-label>Units</mat-label>
        <input matInput placeholder="Units" formControlName="units" />
      </mat-form-field>
      <mat-form-field class="flex-auto mr-5">
        <mat-label>Fraction</mat-label>
        <input matInput type="number" placeholder="Fraction" formControlName="fraction" />
      </mat-form-field>
      <mat-form-field class="flex-auto mr-5">
        <mat-label>Yield</mat-label>
        <input matInput type="number" placeholder="Yield" formControlName="productYield" />
      </mat-form-field>
      <mat-form-field class="flex-auto mr-5">
        <mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
        <input
          matInput
          type="number"
          placeholder="{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
          formControlName="costPrice"
        />
      </mat-form-field>
      <mat-form-field class="flex-auto" [hidden]="!data.isSold">
        <mat-label>Sale Price</mat-label>
        <input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
      </mat-form-field>
    </div>
  </form>
</div>
<div mat-dialog-actions>
  <button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">
    Cancel
  </button>
  <button mat-raised-button color="primary" (click)="accept()">Ok</button>
</div>