Clarity reusable Boolean filter

Question

I have a grid that can have more than one Boolean filter and I'd like to create a reusable filter for it.

The following example allows me to filter cities by capitals and non capitals:

import { Component } from '@angular/core';
import { ClrDatagridFilterInterface } from '@clr/angular';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-boolean-filter',
    template: `
        <clr-checkbox [(clrChecked)]="trueChecked" (clrCheckedChange)="onCheckedTrue($event)" [clrAriaLabeledBy]="'Yes'">
            Yes
        </clr-checkbox>
        <clr-checkbox [(clrChecked)]="falseChecked" (clrCheckedChange)="onCheckedFalse($event)" [clrAriaLabeledBy]="'No'">
            No
        </clr-checkbox>
        `
})
export class BooleanFilterComponent implements ClrDatagridFilterInterface<any> {
    trueChecked = true;
    falseChecked = true;

    changes = new Subject<any>();

    isActive(): boolean {
        return true;
    }

    accepts(value: any) {
        const { capital } = value;

        return (capital && this.trueChecked) || (!capital && this.falseChecked);
    }

    onCheckedTrue(value: any) {
        this.changes.next();
    }

    onCheckedFalse(value: any) {
        this.changes.next();
    }
}

And that's how I use it:

<clr-dg-column [clrDgField]="'capital'">
    Capital
    <clr-dg-filter [clrDgFilter]="capitalFilter" >
        <app-boolean-filter #capitalFilter class="boolean-filter"></app-boolean-filter>
    </clr-dg-filter>
</clr-dg-column>

However this is not really reusable as my filter component depends on city.capital column and if I wanted to have another Boolean filter, I'd have to reuse this.

I couldn't figure from the documentation how to make custom and reusable filters independent from the actual content within grid and would like to know how this is achievable.

My current attempt on Stackblitz.

Answer 1

You're pretty close, all you really need is an input to accept which property to inspect and make it reusable.

So add an input like @Input() prop: string; to your BooleanFilterComponent, and then in your accepts() method you can reference it like so:

accepts(value: City) {
  const state = value[this.prop]; // Note: this only works for top level properties
  return (state && this.trueChecked) || (!state && this.falseChecked);
}

Then you'll just pass the name of the property to the filter component like so:

<app-boolean-filter prop="capital" #capitalFilter class="boolean-filter"></app-boolean-filter>

See your stackblitz working with these changes: https://stackblitz.com/edit/angular-dqumyb?file=src%2Fapp%2Fapp.component.html.