argos/dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.html

<div class="auto-complete">
  <mat-form-field>
    <input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required"
      [errorStateMatcher]="this">
    <mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
    <mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
    <mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ this.printText(option) }} |
        <small *ngIf="_subtitleFn">{{subtitleFn(option)}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>