将数据传递给与属性选择器一起使用的子组件

Question

I am trying to use a child component with an attribute type selector. How can we pass data to such component

My child component selector looks like

selector: '[hello]'

and the parent component template is written as

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

where clients is an object as

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

when I try to use property binding as

[hello]="client"

or use interpolation syntax as

hello="{{client}}"

I get an error as

Can't bind to 'hello' since it isn't a known property

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

PS: I did try to google but all I get is using component selector as element

Answer 1

One way is to create an Input() property with the same name as of the attribute selector hello . Without any Input() property, you cannot pass any data to it.

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

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

parent comp

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

Forked demo