title: Pass data to child component used with attribute selector
body: <p>I am trying to use a child component with an attribute type selector. How can we pass data to such component</p>
  
  <p>My child component selector looks like </p>
  
  <pre><code>selector: '[hello]'
  </code></pre>
  
  <p>and the parent component template is written as</p>
  
  <pre><code>&lt;ng-container *ngFor="let client of clients"&gt;
      &lt;tr hello="client"&gt;&lt;/tr&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>where clients is an object as</p>
  
  <pre><code>clients: any[] = [
      { firstName: 'Ajay', lastName: 'Kumat' },
      { firstName: 'Vijay', lastName: 'Kumar' }
  ]
  </code></pre>
  
  <p>when I try to use property binding as</p>
  
  <pre><code>[hello]="client"
  </code></pre>
  
  <p>or use interpolation syntax as</p>
  
  <pre><code>hello="{{client}}"
  </code></pre>
  
  <p>I get an error as </p>
  
  <blockquote>
    <p>Can't bind to 'hello' since it isn't a known property</p>
  </blockquote>
  
  <p>Stackblitz at <a href="https://stackblitz.com/edit/angular-attribute-selector-child-pass-data" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-attribute-selector-child-pass-data</a></p>
  
  <p>PS: I did try to google but all I get is using component selector as element</p>