prefix-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>Prefix</mat-label>
        <input type="text"
              placeholder="Pick one"
              aria-label="Number"
              matInput
              [formControl]="simpleprefixControl"
              [matAutocomplete]="autosimpleprefix"
              >
        <mat-autocomplete autoActiveFirstOption #autosimpleprefix="matAutocomplete">
          <mat-option *ngFor="let option of simpleprefixfilteredOptions  | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="example-form form-inline">
      <mat-form-field>
        <mat-label *ngIf="subjectsControl.value !=null">Subject : {{subjectsControl.value.slice(0, subjectsControl.value.indexOf(':'))}}</mat-label>
        <input type="text"
              placeholder="Pick one"
              aria-label="Number"
              matInput
              [formControl]="subjectsControl"
              [matAutocomplete]="autosub"
              >
        <mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn">
          <mat-option *ngFor="let option of subjectsfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
    </div>
</div>
<div class="form-row">
    <div class="col">
      <form class="example-form form-inline">
        <mat-form-field>
          <mat-label>Verb or State</mat-label>
          <input type="text"
                placeholder="Pick one"
                aria-label="Number"
                matInput
                [formControl]="verbsControl"
                [matAutocomplete]="autoverb"
                >
          <mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete">
            <mat-option *ngFor="let option of verbsfilteredOptions  | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
      </div>
</div>
<div class="form-row">
      <div class="col">
        <form class="example-form form-inline">
          <mat-form-field>
            <mat-label *ngIf="objectsControl.value !=null">Object : {{objectsControl.value.slice(0, objectsControl.value.indexOf(':'))}}</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="objectsControl"
                  [matAutocomplete]="autobjects"
                  >
            <mat-autocomplete autoActiveFirstOption #autobjects="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of objectsfilteredOptions  | async" [value]="option">
                {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
        </div>
        <div class="col">
          <form class="example-form form-inline" >
            <fieldset disabled>
            <mat-form-field>
              <mat-label>Logic connectivity</mat-label>
              <input type="text"
                    placeholder="Pick one"
                    aria-label="Number"
                    matInput
                    [formControl]="logic_conControl"
                    [matAutocomplete]="autolog_con"
                    >
              <mat-autocomplete autoActiveFirstOption #autolog_con="matAutocomplete">
                <mat-option *ngFor="let option of logic_confilteredOptions  | async" [value]="option">
                  {{option}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
            </fieldset>
          </form>
          </div>
    <div class="col">
      <input class="btn btn-success" 
                type="button" 
                value="Update Prefix"
                (click)="updatePrefix()"/>
    </div>
    </div>


<!--
<ng-container *ngFor= "let prefix of simpleprefix">
    <ul>
      <li>{{prefix[1]}}</li>
    </ul>
  -->