main-details.component.html

<div fxLayoutAlign="end">
  <h2 *ngIf="this.color_badge=='danger'" ><span class="badge badge-danger" > MAIN TEMPLATE : {{this.main}}</span></h2>
  <h2 *ngIf="this.color_badge=='success'" ><span class="badge badge-success" > MAIN TEMPLATE : {{this.main}}</span></h2>
</div>
<div class="form-row">
  <div class="col">
    <form class="form-group form-inline" ngNativeValidate>
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="this.subjectsControl.value !=null">Subject : {{this.subjectsControl.value.split(':')[0]}}:{{this.subjectsControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Subject" matInput [formControl]="subjectsControl" required
          [matAutocomplete]="automainsub" style="width: 100%;">
        <mat-autocomplete autoActiveFirstOption #automainsub="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 class="col">
    <form class="form-group form-inline"
      [ngStyle]="(stateitemControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="this.stateitemControl.value !=null">State or Item :  {{this.stateitemControl.value.split(':')[0]}}:{{this.stateitemControl.value.split(':')[1]}} </mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="stateitemControl"
          [matAutocomplete]="autostateitem">
        <mat-autocomplete autoActiveFirstOption #autostateitem="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of stateitemfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(statevalueControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="statevalueControl.value !=null">State Value : {{this.statevalueControl.value.split(':')[0]}}:{{this.statevalueControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="statevalueControl"
          [matAutocomplete]="autostatevalue">
        <mat-autocomplete autoActiveFirstOption #autostatevalue="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of statevaluefilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
</div>
<div class="form-row">
  <div class="col" style="width: 100px;">
    <form class="form-group form-inline">
      <mat-form-field class="example-full-width">
        <mat-label>Shall/shall not</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="shallControl" required
          [matAutocomplete]="autoshall">
        <mat-autocomplete autoActiveFirstOption #autoshall="matAutocomplete">
          <mat-option *ngFor="let option of shallfilteredOptions  | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(verbControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="verbControl.value !=null">Verb : {{this.verbControl.value.split(':')[0]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="verbControl" required
          [matAutocomplete]="autoverb">
        <mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn">
          <mat-option *ngFor="let option of verbfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(quantifierControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label>Quantifier</mat-label>
        <input placeholder="Pick one" aria-label="Number" matInput [formControl]="quantifierControl" type="text"
          [matAutocomplete]="autoquantifier">
        <mat-autocomplete autoActiveFirstOption #autoquantifier="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of quantifierfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <!--NUmber Value-->
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label>Numerical Value</mat-label>
        <input type="text" matInput [(ngModel)]="currentmain.numerical" name="numerical">
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(numunitControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label>Number Unit</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="numunitControl"
          [matAutocomplete]="autonumunit">
        <mat-autocomplete autoActiveFirstOption #autonumunit="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of numunitfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
</div>
<!-- <mat-label *ngIf=".value !=null">State or Item : {{.value.slice(0, .value.indexOf(':'))}}</mat-label> -->
<div class="form-row">
  <div class="col">
    <form class="form-group form-inline">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="fifuintsysstatsetControl.value !=null">Object : {{this.fifuintsysstatsetControl.value.split(':')[0]}}:{{this.fifuintsysstatsetControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="fifuintsysstatsetControl"
          required [matAutocomplete]="autofifuintsysstatset">
        <mat-autocomplete autoActiveFirstOption #autofifuintsysstatset="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of fifuintsysstatsetfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline"
      [ngStyle]="(stsysconsetControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="stsysconsetControl.value !=null">StateSet or StateValue or System or Connection :  {{this.stsysconsetControl.value.split(':')[0]}}:{{this.stsysconsetControl.value.split(':')[1]}}</mat-label>
        <input placeholder="Pick one" aria-label="Number" type="text" matInput [formControl]="stsysconsetControl"
          [matAutocomplete]="autostsysconset">
        <mat-autocomplete autoActiveFirstOption #autostsysconset="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of stsysconsetfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
</div>