title: Passing data from ngContent in angular
body: <p>I want to create childComponent which generate datagrid. So, I create grid.component.html and grid.component.ts. My aim is, my team mate never touch grid.ts and grid.html. Because my grid structure will be similar in for all page in my app. So, they only add like myComponent.html and myComponent.ts. They will write button's html and button's click event to myComponent. I can create grid. But my problem is, I can't access rowData in showDetail method. ("rowData" is implicit of primeNg directive. I wasn't setting anywhere. I only gave p-table value.)</p>
  
  <h2>myComponent.html</h2>
  
  <pre><code>&lt;app-grid&gt;
    &lt;ng-template pTemplate="body" let-rowData="rawData"&gt;
          &lt;button label="Reject" (click)="reject(rowData)"&gt;&lt;/button&gt;
          &lt;button label="Detail" (click)="showDetail(rowData)"&gt;&lt;/button&gt;
    &lt;/ng-template&gt;
  &lt;/app-grid&gt;
  </code></pre>
  
  <h2>myComponent.ts</h2>
  
  <pre><code>reject(data){
    console.log("Reject data ", data);
  }
  
  showDetail(data){
     console.log("showDetail data ", data);
  }
  </code></pre>
  
  <h2>grid.component.html</h2>
  
  <pre><code>rawData = {}
  
  @ContentChild(TemplateRef)
  templateRef : TemplateRef&lt;any&gt;;
  </code></pre>
  
  <h2>grid.component.ts</h2>
  
  <pre><code>&lt;p-table [value]="globalVariables.myData"&gt;
     &lt;ng-template pTemplate="body" let-rowData&gt;  // This rowData come from PrimeNg "implicit" value
       &lt;tr&gt;
         &lt;td *ngFor="let col of globalVariables.columns"&gt;
            {{ rowData[col.field] }}
         &lt;/td&gt;
         &lt;td&gt;
           &lt;ng-template *ngTemplateOutlet="templateRef; context : {rawData : rawData}"&gt;&lt;/ng-template&gt;
         &lt;/td&gt;
       &lt;/tr&gt;
     &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>