CODEWITHSUNDEEP
angular
Saksham
Saksham

Reputation: 9390

Pass data to child component used with attribute selector

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

Upvotes: 1

Views: 1835

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29775

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

Upvotes: 3

Related Questions