Angular 4 Search filter object

Question

I have the following code bellow

            <div class="doctor-content container-fluid">
                <div class="options">
                    <div class="filter col-md-8">
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Name" name="name" [(ngModel)]='doctorName'>
                        </mat-form-field>
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Clinic" name="clinicName" [(ngModel)]='clinicName'>
                        </mat-form-field>
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Specialization" name="specialization" [(ngModel)]='specialization'>
                        </mat-form-field>
                    </div>
                    <div class="doctor-list">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>First Name</th>
                                    <th>Email</th>
                                    <th>Clinic</th>
                                    <th>Specialization</th>
                                </tr> 
                            </thead>
                            <tbody>
                                <tr *ngFor='let list of doctors | filter:doctorName | filter:clinicName | filter:specialization| paginate: { itemsPerPage: 25, currentPage: p }'>
                                    <td class="doctor-image">
                                        <img src="../../assets/images/user_blue.png">
                                    </td>
                                    <td>{{list.firstName}} {{list.lastName}}</td>
                                    <td>&nbsp;</td>
                                    <td>{{list.clinics[0].name}}</td>
                                    <td>{{list.specializations[0].name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

The search filter is only working for firstName and not working for clinic Name and specialization Name. Can any one please help me Im using

"ng2-search-filter": "^0.3.1",

Answer 1

You have to write your own or change the ng2-search-filter according to you need, something like

HTML:

<tbody>
    <tr *ngFor='let list of doctors | filter: doctorName : clinicName : specialization | paginate: { itemsPerPage: 25, currentPage: p }'>
    <td class="doctor-image">
        <img src="../../assets/images/user_blue.png">
     </td>
    <td>{{list.firstName}} {{list.lastName}}</td>
    <td>&nbsp;</td>
    <td>{{list.clinics[0].name}}</td>
    <td>{{list.specializations[0].name}}</td>
    </tr>

Pipe:

    @Pipe({
  name: 'filter',
  pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {


  transform(items: any, args:string[]): any {
    if (!term || !items) return items;

    return Ng2SearchPipe.filter(items, args);
  }


  static filter(items: Array<{ [key: string]: any }>, args:string[]): Array<{ [key: string]: any }> {

    const toCompare1 = args[0].toLowerCase();
     const toCompare2 = args[1].toLowerCase();
      const toCompare3 = args[2].toLowerCase();

    return items.filter(function (item: any) {
      for (let property in item) {
        if (item[property] === null) {
          continue;
        }
        if (item[property].toString().toLowerCase().includes(toCompare1) || item[property].toString().toLowerCase().includes(toCompare2) || item[property].toString().toLowerCase().includes(toCompare3) ||  ) {
          return true;
        }
      }
      return false;
    });
  }
}

Hope it helps.