Crear un filtro de búsqueda en Angular

1. El filtro de búsqueda angular
2. Pasos para crear un filtro de búsqueda en Angular
3. Ventajas del filtro de búsqueda personalizado

Este artículo demostrará cómo usar el paquete ng2-search-filter y la directiva de bucle ngfor para crear un filtro de búsqueda en un proyecto Angular para filtrar los datos recopilados.

El filtro de búsqueda angular

El marco Angular incluye muchas características que pueden crear varias aplicaciones. Una de esas características es la capacidad de utilizar pipes, que son filtros que se pueden aplicar a los datos antes de que se muestren en la pantalla.

El filtro de búsqueda angular proporciona una forma declarativa de filtrar datos a medida que ingresan o salen del alcance de un controlador. El filtro se puede aplicar a cualquier objeto de datos: cadenas, matrices, objetos o incluso primitivos.

Los filtros se ejecutan de izquierda a derecha hasta que uno devuelve verdadero, o todos se han ejecutado sin devolver verdadero. El mejor enfoque para construir una búsqueda personalizada en Angular es usar el paquete ng2-search-filter en lugar de usar una biblioteca de terceros.

Pasos para crear un filtro de búsqueda en Angular

Esta sección demostrará los pasos necesarios para crear un filtro de búsqueda en Angular.

Instalar la CLI de Angular

Primero, instale la herramienta Angular CLI, que se utiliza para desarrollar aplicaciones Angular. Ejecute este comando para instalar Angular CLI.

npm install @angular/cli

Instale el paquete ng2-search-filter

El segundo y más importante paso es instalar el paquete ng2-search-filter.

npm i ng2-search-filter

El ng2-search-filter proporciona un componente de entrada de búsqueda para aplicaciones Angular. Permite al usuario filtrar una lista de elementos escribiendo en el cuadro de entrada.

El componente es altamente configurable y admite muchas fuentes de datos diferentes.

Importar los Módulos

El tercer paso es importar FormsModule y Ng2SearchPipeModule en la clase App Module. Porque si desea crear un formulario de búsqueda para su sitio web, deberá importar ambos módulos.

Escriba el siguiente código en su aplicación Angular.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
@NgModule({
    imports:      [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Escriba el código TypeScript y HTML

Este paso decidirá cómo se verá su filtro de búsqueda. Escribiremos código TypeScript y HTML.

Código TypeScript:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css']
})
export class AppComponent {
    searchText: any;
    names = [
        { country: 'Adil'},
        { country: 'John'},
        { country: 'Jinku'},
        { country: 'Steve'},
        { country: 'Sam'},
        { country: 'Zeed'},
        { country: 'Abraham'},
        { country: 'Heldon'}
    ];
}

Código HTML:

 <h1>Example of Angular Search Filter</h1>
<div class="container">
    <div class="search-name">
        <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="on" placeholder=" SEARCH  ">
    </div>
    <ul *ngFor="let name of names | filter:searchText">
        <li>
            <span>{{name.country}}</span>
        </li>
    </ul>
</div>

En este ejemplo, escribimos algunos nombres aleatorios y, con la ayuda del bucle ng2-search-filter y ng-for, pudimos filtrar los datos mediante la búsqueda.

Ventajas del filtro de búsqueda personalizado

Hemos aprendido todos los pasos para crear un filtro de búsqueda en Angular. Veamos los beneficios de crear un filtro de búsqueda personalizado con la ayuda del paquete ng2-search-filter.

1. Es fácil de usar y personalizar según las necesidades de la aplicación.
2. Es un componente de núcleo angular que brinda flexibilidad y precisión.
3. El filtro de búsqueda se puede utilizar con cualquier dato, no solo con cadenas.

Haga clic aquí para ver la demostración en vivo de todos los pasos anteriores.