title: How to filter over a PrimeNg DataTable column with ng-template?
body: <p><strong>This is my column:</strong></p>
  
  <pre><code>&lt;p-column header="Roles" sortable="true" [filter]="true" filterMatchMode="contains"&gt;
    &lt;ng-template let-user="rowData" pTemplate="body"&gt;
      &lt;div *ngFor="let role of user.roles"&gt;
        {{role.name}}
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/p-column&gt;
  </code></pre>
  
  <p>Examples of user.roles JSON:</p>
  
  <pre><code>[ { "id": 3, "name": "A single role" } ]
  [ { "id": 4, "name": "A role name" }, { "id": 6, "name": "Another role name" } ]
  </code></pre>
  
  <p><strong>I would like to add a filter on it - I tried adding this ng-template:</strong></p>
  
  <pre><code>&lt;ng-template pTemplate="filter" let-col let-test="rowData"&gt;
          &lt;p-multiSelect [options]="roles" defaultLabel="All roles" (onChange)="dt.filter($event.value,test.roles,col.filterMatchMode)"
            styleClass="ui-column-filter"&gt;&lt;/p-multiSelect&gt;
   &lt;/ng-template&gt;
  </code></pre>
  
  <p>The multiselect's options are in a separate roles array:</p>
  
  <pre><code>this.roles = [];
  this.roles.push({ label: 'A role', value: 'aRole' });
  this.roles.push({ label: 'Another role', value: 'anotherRole' });
  </code></pre>
  
  <p>... but for some reason, I get this error:</p>
  
  <blockquote>
    <p>Cannot read property 'roles' of undefined</p>
  </blockquote>
  
  <ul>
  <li>How can I achieve this ?</li>
  <li>How can I debug inline function calls like dt.filter($event.value,test.roles,col.filterMatchMode) ?</li>
  <li>I think that my main problem is that my column does not have a "field" value which can be used for filtering. </li>
  </ul>