Filter table in Angular based on Dropdown

Question

I'm trying to filter table based on the data passed from my dropdown.

I use reactiveForm for my Dropdown :

<form novalidate [formGroup]="policeform">
  <p-dropdown [options]="Assureurs" optionLabel="nom"  formControlName="assureur"></p-dropdown>
  <p-dropdown [options]="Intermediares" optionLabel="nom"  formControlName="intermediare"></p-dropdown>

I call 'Assureurs' and 'Interemediares' lists from Backend :

 getAssureurs(){
      this.policeService.getAssureursList().subscribe(
        data => {
        this.Assureurs=data;
        },
       error =>
        console.log(error));
    }
    getIntermediares(){
      this.policeService.getIntermediaresList().subscribe(
        data => {
        this.Intermediares=data;
        },
       error =>
        console.log(error));
    }

    initPoliceForm(){
      this.policeform = this.fb.group({
        assureur:[''],
        intermediare:['']
    });
    }

My 'Assureur' is like : (for example)

{
        "id":3,
        "nom": "Atla",
        "dateCreation":"2020-05-14T00:20:15.956+0000",
        "Actif":true
    }

This is my Filter:

@Pipe({
  name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {

  transform(list: any[], formControls: Object) {
    const keys       = Object.keys(formControls).filter(key => formControls[key]);
    const filterUser = user => keys.every(key => {
      user[key].nom==formControls[key].nom;
     });
    return keys.length ? list.filter(filterUser) : list;
  }
}

But it didn't work, it's not returning the filterd data !

This is how i use the filter :

<tr  *ngFor="let police of polices |async| orderBy: 'id' | tableFilter: policeform.value ">

the nom property is in the list of 'Assureur' and 'Intermediare' — Lamyae Lac

charbel charbel · Accepted Answer · 2020-06-06T10:55:21

You can add in your component.ts file:

filteredPolices : Police[] = [];
_listFilter = '';
get listFilter(): string {
      return this._listFilter;
}

set listFilter(value: string){
      this._listFilter = value;
      this.filteredPolices = this.listFilter ? this.performFilter(this.listFilter) : this.polices;
}

Implement the performFilter method:

performFilter(filterBy: string): Police[]{
      // implement you filter and return the result
}

In your HTML file add [(ngModel)]="listFilter" to the dropdown

and loop through you filtered data:

<tr *ngFor="let police of filteredPolices | orderBy: 'id' ">

Hope this help.

Filter table in Angular based on Dropdown

1 Answers