Busqueda dinámica con Angular

Angularpipes

Oscar Trujillo

Oscar Trujillo Morales

Para casi todo lo que queramos hacer en JavaScript existe una librería. Para instalarlas, una opción es utilizar npm, el sistema de gestión de paquetes por defecto para Node.js

Repositorio en Git

Instala el paquete ng2-search-filter:

npm i ng2-search-filter --save

Importa Ng2SearchPipeModule en AppModule. Incluyamos también, dentro de imports, FormsModule para poder utilizar luego el atributo ng-model.

...
  imports: [
    BrowserModule,
    AppRoutingModule,
    Ng2SearchPipeModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
  ...
}

En el componente app.component.ts

    import { Component } from `@angular/core`;

    @Component({
      selector: `app-root`,
      templateUrl: `./app.component.html`,
      styleUrls: [`./app.component.scss`]
    })
    export class AppComponent {
      filterTerm: any ;
      userRecords = [{
        `id`: 1,
        `name`: `Oscar`,
        `email`: `oscar@gmail.com`
      },
      {
        `id`: 2,
        `name`: `Ulises`,
        `email`: `ulises@gmail.com`
      },
      {
        `id`: 3,
        `name`: `Carlitos`,
        `email`: `carlos@gmail.com`
      },

  ]
}

Modo de uso, en la vista

...input type=`text` class=`form-control`
      placeholder=`Buscar...` [(ngModel)]=`filterTerm`>
...