Angular で検索フィルターを作成する

1. Angular 検索フィルター
2. Angular で検索フィルターを作成する手順
3. カスタム検索フィルターの利点

この記事では、ng2-search-filter パッケージと ngfor ループディレクティブを使用して、Angular プロジェクトで検索フィルターを作成し、収集されたデータをフィルター処理する方法を示します。

Angular 検索フィルター

Angular フレームワークには、さまざまなアプリケーションを作成できる多くの機能が含まれています。そのような機能の 1つは、画面に表示される前にデータに適用できるフィルターであるパイプを使用する機能です。

Angular 検索フィルターは、データがコントローラーのスコープに出入りするときにデータをフィルター処理する宣言型の方法を提供します。フィルタは、文字列、配列、オブジェクト、さらにはプリミティブなど、任意のデータオブジェクトに適用できます。

フィルタは、1つが true を返すまで、またはすべてが true を返さずに実行されるまで、左から右に実行されます。Angular でカスタム検索を構築するための最良のアプローチは、サードパーティのライブラリを使用するのではなく、ng2-search-filter パッケージを使用することです。

Angular で検索フィルターを作成する手順

このセクションでは、Angular で検索フィルターを作成するために必要な手順を示します。

Angular CLI をインストールする

まず、Angular アプリケーションの開発に使用される Angular CLI ツールをインストールします。このコマンドを実行して、Angular CLI をインストールします。

npm install @angular/cli

ng2-search-filter パッケージのインストール

2 番目の最も重要なステップは、ng2-search-filter パッケージをインストールすることです。

npm i ng2-search-filter

ng2-search-filter は、Angular アプリの検索入力コンポーネントを提供します。これにより、ユーザーは入力ボックスに入力してアイテムのリストをフィルタリングできます。

コンポーネントは高度に構成可能であり、多くの異なるデータソースをサポートします。

モジュールをインポートする

3 番目のステップは、AppModule クラスに FormsModule と Ng2SearchPipeModule をインポートすることです。Web サイトの検索フォームを作成する場合は、両方のモジュールをインポートする必要があるためです。

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

TypeScript と HTML コードを書く

この手順により、検索フィルターの外観が決まります。TypeScript と HTML コードを記述します。

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

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>

この例では、いくつかのランダムな名前を記述し、ng2-search-filter および ng-for ループの助けを借りて、検索によってデータをフィルタリングすることができました。

カスタム検索フィルターの利点

Angular で検索フィルターを作成するためのすべての手順を学びました。ng2-search-filter パッケージを使用してカスタム検索フィルターを作成する利点を見てみましょう。

1. アプリケーションのニーズに応じて簡単に使用およびカスタマイズできます。
2. 柔軟性と正確さを提供する Angular コアコンポーネントです。
3. 検索フィルターは、文字列だけでなく、任意のデータで使用できます。

ここをクリックして、上記のすべてのステップのライブデモンストレーションを確認してください。