Erstellen Sie einen Suchfilter in Angular

1. Der Angular-Suchfilter
2. Schritte zum Erstellen eines Suchfilters in Angular
3. Vorteile des benutzerdefinierten Suchfilters

Dieser Artikel zeigt, wie man das Paket ng2-search-filter und die Schleifendirektive ngfor verwendet, um einen Suchfilter in einem Angular-Projekt zu erstellen, um die gesammelten Daten zu filtern.

Der Angular-Suchfilter

Das Angular-Framework enthält viele Funktionen, mit denen verschiedene Anwendungen erstellt werden können. Eine dieser Funktionen ist die Möglichkeit, pipes zu verwenden, d. h. Filter, die auf Daten angewendet werden können, bevor sie auf dem Bildschirm angezeigt werden.

Der Angular-Suchfilter bietet eine deklarative Möglichkeit, Daten zu filtern, wenn sie in den Bereich eines Controllers eintreten oder diesen verlassen. Der Filter kann auf jedes Datenobjekt angewendet werden: Strings, Arrays, Objekte oder sogar Primitive.

Filter werden von links nach rechts ausgeführt, bis einer wahr zurückgibt oder alle ausgeführt wurden, ohne wahr zurückzugeben. Der beste Ansatz zum Erstellen einer benutzerdefinierten Suche in Angular besteht darin, das Paket ng2-search-filter zu verwenden, anstatt eine Bibliothek von Drittanbietern zu verwenden.

Schritte zum Erstellen eines Suchfilters in Angular

Dieser Abschnitt zeigt die Schritte, die zum Erstellen eines Suchfilters in Angular erforderlich sind.

Installieren Sie die Angular-CLI

Installieren Sie zunächst das Angular-CLI-Tool, das zum Entwickeln von Angular-Anwendungen verwendet wird. Führen Sie diesen Befehl aus, um Angular CLI zu installieren.

npm install @angular/cli

Installieren Sie das Paket ng2-search-filter

Der zweite und wichtigste Schritt ist die Installation des Pakets ng2-search-filter.

npm i ng2-search-filter

Der ng2-search-filter stellt eine Sucheingabekomponente für Angular-Apps bereit. Es ermöglicht dem Benutzer, eine Liste von Elementen zu filtern, indem er sie in das Eingabefeld eingibt.

Die Komponente ist hochgradig konfigurierbar und unterstützt viele verschiedene Datenquellen.

Importieren Sie die Module

Der dritte Schritt besteht darin, das FormsModule und Ng2SearchPipeModule in die Klasse App Module zu importieren. Denn wenn Sie ein Suchformular für Ihre Website erstellen möchten, müssten Sie beide Module importieren.

Schreiben Sie den folgenden Code in Ihre Angular-App.

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 { }

Schreiben Sie den TypeScript- und HTML-Code

Dieser Schritt entscheidet, wie Ihr Suchfilter aussehen wird. Wir schreiben TypeScript- und HTML-Code.

TypeScript-Code:

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'}
    ];
}

HTML Quelltext:

 <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>

In diesem Beispiel haben wir einige zufällige Namen geschrieben und mit Hilfe des ng2-search-filter und der ng-for-Schleife konnten wir die Daten durch Suchen filtern.

Vorteile des benutzerdefinierten Suchfilters

Wir haben alle Schritte gelernt, um einen Suchfilter in Angular zu erstellen. Schauen wir uns die Vorteile der Erstellung eines benutzerdefinierten Suchfilters mit Hilfe des Pakets ng2-search-filter an.

1. Es ist einfach zu bedienen und an die Anforderungen der Anwendung anzupassen.
2. Es ist eine Angular Kernkomponente, die Flexibilität und Genauigkeit bietet.
3. Der Suchfilter kann mit beliebigen Daten verwendet werden, nicht nur mit Zeichenfolgen.

Klicken Sie hier, um die Live-Demonstration aller oben genannten Schritte zu überprüfen.