<ng-container *ngIf="spec.renderer">
  <ng-container
    *ngIf="rendererType === 'TEMPLATE'"
    [ngTemplateOutlet]="spec.renderer"
    [ngTemplateOutletContext]="{ $implicit: spec.context }"
  >
  </ng-container>

  <ng-container
    *ngIf="rendererType === 'COMPONENT'"
    [ngComponentOutlet]="spec.renderer"
    [ngComponentOutletInjector]="rendererInjector"
  >
  </ng-container>
</ng-container>

<ng-container *ngIf="!spec.renderer">
  <div class="form-group">
    <label translate>Filter text</label>
    <input
      class="form-control"
      [(ngModel)]="defaultRendererFilterText"
      (keyup.enter)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
    />
  </div>
  <div class="flex-row">
    <button
      class="btn btn-default btn-sm flex-grow m-r-8"
      (click)="defaultRendererFilterText = ''; spec.context.resetFilter()"
      translate
    >
      Reset
    </button>
    <button
      class="btn btn-primary btn-sm flex-grow"
      (click)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
      translate
    >
      Apply
    </button>
  </div>
</ng-container>