Угловая обратная связь

Question

У меня проблема с приложением, написанным с использованием Anuglar 6 . Я создал элемент простого элемента

@Component({
  selector: 'product-grid-item',
  styleUrls: ['./product.grid.item.component.scss'],
  templateUrl: './product.grid.item.component.html',
})
export class ProductGridItemComponent {
  @Input()
  item: Product;

  @Input()
  onClick: Function;
}

И в html у меня есть прослушиватель кликов

<span [attr.data-product-id]="item.id" class="fa fa-edit" (click)="onClick($event)"></span>

В родительском компоненте я передаю функцию обратного вызова

    class="col-md-6 col-xl-4" [onClick]="onProductEditClick" [item]="productItem">

MyСлушатель определяется следующим образом:

  constructor(private store: Store, private dialogService: NbDialogService) {
  }

  onProductEditClick(elem) {
    const productId = elem.target.getAttribute("data-product-id");
    const dialogRef = this.dialogService.open(EditProductDialog, {context: {productId: productId}});
  }

Но когда я пытаюсь нажать на кнопку редактирования, я получаю следующую ошибку

zone.js:192 Uncaught TypeError: Cannot read property 'open' of undefined

Пожалуйста, помогите.