Ошибка пользовательского фильтра Clarity: ОШИБКА TypeError: Невозможно прочитать свойство 'подписка' из неопределенного

Question

Я отчетливо получаю это сообщение об ошибке при использовании настраиваемого фильтра на примере: https://vmware.github.io/clarity/documentation/v0.11/datagrid/custom-filtering

ОШИБКА TypeError: Невозможно прочитать свойство 'subscribe' из неопределенного. Ошибка в первой строке:

   <clr-dg-column *ngFor="let column of (gridData$ | async)?.columnDefs" [clrDgField]="'column.name'">
       {{ column.name }}
       <clr-dg-filter [clrDgFilter]="datagridFilter">
           <app-datagrid-filter #datagridFilter></app-datagrid-filter>
       </clr-dg-filter>
   </clr-dg-column>

Если я удаляю #datagridFilter, ошибка исчезает, но вход фильтра не отображается.

DatagridFilter определяется как:

import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';

import {Filter} from "clarity-angular/data/datagrid/interfaces/filter";
import {Subject} from "rxjs/Subject";


@Component({
    selector: "app-datagrid-filter"
})
export class DatagridFilter implements Filter<any> {
    changes = new Subject<any>();
    constructor(public prop: any) {
        this.prop = prop;
    }
    isActive(): boolean {
        return true;
     }
    accepts(item: any):boolean {
        return true;
        //return item.indexOf(search) > -1 || item.filter(i => i.indexOf(search) > -1)[0]
    }
}

DatagridFilter создается далее в родительском компоненте. фрагмент кода:

export class DatagridComponent implements OnInit {
  count: number = 10;
  gridData$: Observable<any>;
  reportAction$: Observable<any>;
  formDefinition$: any;
  totalRecords$: Observable<number>;
  selected: any = [];
  datagridFilter: any;

......
ngOnInit() {

......
    this.gridData$.subscribe(data => {
        this.datagridFilter = new DatagridFilter(data.columnDefs);
    });
...