How to get the refrence of list of directives used inside ng-content in the parent component in angular 2

Question

I am trying to create a data table component for which i have created data-table component, col-header directive and col-body directive. the idea is to get the label of column header from col-header directive and the value from col-body directive and then data-table component renders the data table. But the problem is

1. I'am unable to get the value that I'm passing as @Input to the directive .
2. I'm unabe to get the refrence of the col-header directive indata-table component by using @ContentChildren

Please consider that I just started learning angular 2 and m not very good at it. My code setup is as follows

DataTableComponent.ts

       @Component({
         selector: 'data-table',
         template: `
                  <table class="table table-bordered table-striped">
                       <thead>
                          <tr *ngFor="let header of headders ">
                            <ng-template></ng-template>
                             <td>{{header.label}}</td>
                          </tr>
                        </thead>
                       <tbody>
                           <ng-template></ng-template>
                       </tbody>
                       </table>,
           styleUrls: ['./data-table.component.css']
         })
         export class DataTableComponent implements OnInit {
         @ContentChildren(Header) headers: QueryList<Header>;
      }
     @Input() items: User[];
     ngOnInit() {
       }
    ngOnChanges(changes: SimpleChanges): void {
   console.log(changes)
    console.log(this.headers)

   }
 }

ColHeaderComponent.ts

            @Directive({
                   selector: 'col-header',
            })
            export class Header implements OnInit {
                 constructor() {
                  }
                 @Input() label: string;
                 @Input() value: any;
                ngOnInit() {
                   console.log(this.label)
                  }
               ngOnChanges(changes: SimpleChanges): void {
                   let chng = changes['label'];
                  console.log(chng)
                   }
               }

and I an using it as follows

     <data-table [items]="users">
          <col-header [label]="Name"></col-header>
         <col-header [label]="Password"></col-header>
         <col-body [column]="username"></col-body>
          <col-body [column]="password"></col-body>
     </data-table>

I haven't written any thing about col-body directive because i'm yet to reach there. Please review code with patience because there may be many mistakes.

I just want simple idea on how to on how to get value to and from component using @Input and how to get refrence of child directive using @ContentChildren

Thanks

Answer 1

Try this

 @ContentChildren(forwardRef(() => Header), {descendants: true}) headers: QueryList<Header>;