suffix-details.component.html

<div class="form-row">
    <div class="col">
      <form class="form-group form-inline">
        <mat-form-field class="example-full-width">
          <mat-label>Suffix</mat-label>
          <input type="text"
                placeholder="Pick one"
                aria-label="Number"
                matInput
                [formControl]="suffixControl"
                [matAutocomplete]="autosuffix"
                >
            <mat-autocomplete autoActiveFirstOption #autosuffix="matAutocomplete">
            <mat-option *ngFor="let option of suffixfilteredOptions  | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
    </div>
    <div class="col" >
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label>Numerical Value</mat-label>
            <input type="number" matInput value=0 [(ngModel)]="currentsuffix.numerical" name="numerical">
          </mat-form-field>
        </form>
    </div>
    <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label>Unit</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="mumerical_unitsControl"
                  [matAutocomplete]="automumerical_units"
                  >
              <mat-autocomplete autoActiveFirstOption #automumerical_units="matAutocomplete">
              <mat-option *ngFor="let option of mumerical_unitsfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label>Flow</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="flowControl"
                  [matAutocomplete]="autoflow"
                  >
              <mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete">
              <mat-option *ngFor="let option of flowfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <button
          type="submit"
          class="badge badge-success mb-2"
          (click)="updateSuffix()"
        >
          Update Suffix
        </button>
      </div>
</div>