Передать данные в дочерний компонент, используемый с селектором атрибута

Question

Я пытаюсь использовать дочерний компонент с селектором типа атрибута.Как мы можем передать данные в такой компонент

Мой селектор дочернего компонента выглядит как

selector: '[hello]'

, а шаблон родительского компонента записывается как

<ng-container *ngFor="let client of clients">
    <tr hello="client"></tr>
</ng-container>

, где клиенты являютсяобъект как

clients: any[] = [
    { firstName: 'Ajay', lastName: 'Kumat' },
    { firstName: 'Vijay', lastName: 'Kumar' }
]

, когда я пытаюсь использовать привязку свойства как

[hello]="client"

или использовать синтаксис интерполяции как

hello="{{client}}"

Я получаю ошибку как

Невозможно выполнить привязку к 'привет', так как это неизвестное свойство

Stackblitz на https://stackblitz.com/edit/angular-attribute-selector-child-pass-data

PS: я пытался Google, новсе, что я получаю, использует компонент выбора в качестве элемента

Answer 1

Один из способов - создать свойство Input() с тем же именем, что и у селектора атрибута hello.Без какого-либо свойства Input() вы не можете передавать ему какие-либо данные.

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

@Component({
  selector: '[hello]',
  template: `<td>{{hello.firstName}}</td>
  <td>{{hello.lastName}}</td>`
})
export class HelloComponent  {
  @Input() hello: any;
}

родительский комп

<ng-container *ngFor="let client of clients">
    <tr [hello]="client"></tr>
</ng-container>

Forked demo