Custom Filters Implementation issue

[palunjm]

I am trying to wrap up duplicated code into a component:

so that

Code: Select all

<ng-template #planetFilterTemplate pTemplate="filter" let-col>
  <i class="fa fa-filter" (click)="planetMenu.toggle($event)" *ngIf="!filtered[col.field]"></i>
  <span class="fa-stack" (click)="planetMenu.toggle($event)" *ngIf="filtered[col.field]">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-filter fa-stack-1x fa-inverse"></i>
  </span>
<ng-template>

becomes something like this

Code: Select all

<app-filter [menu]="planetMenu"></app-filter>

The problem is that <p-column> is not picking up that there is an <ng-template> buried in a child element. Clearly I am doing something wrong. Should I be trying to make a structural directive for this use case?

Here is a plunker that fleshes this idea out a bit https://plnkr.co/DZXNlq

Any help is appreciated.