4

I've managed to add only one custom filter in my table.

View:

<th colspan="2">
    <p-columnFilter field="campaigns" [showMenu]="false" [matchMode]="'customFilter1'">
         <ng-template pTemplate="filter" let-value let-filter="filterCallback">
            <p-dropdown [options]="mainFilterListOfCountries" [resetFilterOnHide]="true"
              [(ngModel)]="selectedCountryToFilter" (onChange)="filter($event.value)">
                  //More code
            </p-dropdown>
         </ng-template>
    </p-columnFilter>
</th>

<th  colspan="2" >
   <p-columnFilter field="affiliateTypes" [showMenu]="false" [matchMode]="'customFilter2'">
        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
               <p-selectButton [options]="activeOrAllAffiliatesMainFilterOptions"
                      [(ngModel)]="selectedStatus" (onChange)="filter($event.value)"
                                optionLabel="label">
   </p-selectButton>
      </ng-template>
  </p-columnFilter>
</th>

Component:

ngOnInit(): void {

this.filterService.register('customFilter1', (value, filter): boolean => {
  if (filter.option === "all") {
    return true;
  }
  if (value && value.length) {
    return true;
  } else {
    return false;
  }

});}

I need to add a few more custom filters.

Maybe something like this(?):

Component:

  ngOnInit(): void {

this.filterService.register([customFilter1 , customFilter2 ,....], (value, filter): boolean => {

  if(customFilter1){
    if (filter.option === "all") {
      return true;
    }
    if (value && value.length) {
      return true;
    } else {
      return false;
    }
  }
  else if(customFilter2){
    if (value && value.length) {
      return true;
    } else {
      return false;
    }
  }
});

}

I'm guessing that the thing is that you can't register multiple times to the same service in the same component...

I mean there probably is a way, it's just not to my knowledge...

  • Angular : 11
  • PrimeNG: 11.4.4
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Liran Rouzentur
  • 61
  • 1
  • 5

1 Answers1

0

This is old but... Maybe this is obvious or I don't understand your issue, but why don't you just register them both like

ngOnInit(): void {
    
    this.filterService.register('customFilter1', (value, filter): boolean => {
      //customFilter1 stuff
    });
    
    this.filterService.register('customFilter2', (value, filter): boolean => {
      //customFilter2 stuff
    });
}

Because you are essentially putting 2 callbacks in a map by key name (the customFilter1/2 bit as the key). The value being sent in is configured from the table markup and which column you selected to put the filter on.

Randy
  • 729
  • 5
  • 14