Pipes ( search, pagination, order )

Referencias:

https://www.npmjs.com/package/ngx-filter-pipe

https://www.npmjs.com/package/ngx-pagination

https://www.npmjs.com/package/ngx-order-pipe

Librerias a instalar: 

 "ng2-filter-pipe": "^0.1.10",

 "ng2-order-pipe": "^0.1.5",

 "ngx-paginate": "^1.0.5",

 "ngx-pagination": "^3.0.1",

2. npm install

3. agregar en modulo shared components para exportar

// Pipes de filtrados para las busquedas
import { Ng2FilterPipeModule } from "ng2-filter-pipe";
import { NgxPaginationModule } from "ngx-pagination";
import { Ng2OrderModule } from "ng2-order-pipe";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
const pack_shared = [
                // BrowserModule,
                Ng2FilterPipeModule,
                NgxPaginationModule,
                Ng2OrderModule,
                NgxSpinnerModule,
                FormsModule,
                ReactiveFormsModule,
                HttpClientModule,
                ];
@NgModule({
  imports: [ IonicModule, CommonModule, RouterModule, pack_shared],
  declarations: [components],
  exports: [components, pack_shared],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentsModule {}

-------

4. agregar el modulo components

import { ComponentsModule } from '../components/components.module';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReportsPageRoutingModule,
    ComponentsModule
  ],
  declarations: [ReportsPage, 
    AttentionComponent,
    BinnaclesComponent,
    MeasurementComponent,
    PatientTagsComponent, ]
})
export class ReportsPageModule {}

4. En el componente a usar, se debe crear un objeto con los mismos atributos que tiene un item de mi array de objetos 

ej. 

  public filter    = {
                      accion : "",  
                      user: {
                        username: ""
                      }                    
  };

Luego Crear el html y ponerle un ngModel asi

        <small class="text-muted form-text" >Acciones: </small>
        <select class="form-control" [(ngModel)]="filter.accion" >
          <option value=""  > - Todos - </option>
          <option *ngFor="let item of actionList"  [ngValue]="item"  >{{ item }}</option>
        </select>
  
        <small class="text-muted form-text" >Usuarios: </small>
        <select class="form-control" [(ngModel)]="filter.user.username" >
          <option value=""  > - Todos - </option>
          <option *ngFor="let item of userList"  [ngValue]="item.username"  >{{ item.username }}</option>
        </select>

5. Para finalizar se pone estas condiciones en el For de su listado y las cosas se filtran en tiempo real.

  <tbody>
        <tr *ngFor="let item of dataList | filterBy: filter | paginate:{ itemsPerPage: itemsPage, currentPage:pageActual }; let i=index;">
          <td>{{ (i+1) }}</td>
          <td>{{ item.accion }}</td>
          <td>{{ getUser(item) }}</td>
          <td>{{ item.created_at }}</td>
        </tr>
      </tbody>