argos/dmp-frontend/src/app/shared/components/external-items/external-item-listing/external-item-listing.component.html

<div>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
          <mat-form-field >
              <mat-select placeholder="Sources" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="viewOnly">
                <mat-option *ngFor="let option of options" [value]="option.key">
                  {{ option.label }}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </div>
      <div>
          <app-external-item class="col-md-9" [autoCompleteConfiguration]="autoCompleteConfiguration" [formGroup]="formGroup" [displayFunction]="displayFunction"
          [placeholder]="placeholder" [subtitleFunction]="subtitleFunction" (onItemChange)="this.onItemChangeFunc($event)" [formCtrl]="formControl"
          [disabled]="disabled">
        </app-external-item>
      </div>
    </div>
    <div class="row" *ngFor="let suggestion of formGroup['controls']; let i = index">
      <ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: suggestion, index: i,function: this.deleteItem.bind(this) }">
      </ng-container>
    </div>
  </div>
</div>