Angular에서 검색 필터 만들기

1. Angular 검색 필터
2. Angular에서 검색 필터를 만드는 단계
3. 맞춤 검색 필터의 장점

이 기사에서는 ng2-search-filter 패키지와 ngfor 루프 지시문을 사용하여 수집된 데이터를 필터링하기 위해 Angular 프로젝트에서 검색 필터를 만드는 방법을 보여줍니다.

Angular 검색 필터

Angular 프레임워크에는 다양한 애플리케이션을 만들 수 있는 많은 기능이 포함되어 있습니다. 이러한 기능 중 하나는 데이터가 화면에 표시되기 전에 데이터에 적용할 수 있는 필터인 파이프를 사용하는 기능입니다.

Angular 검색 필터는 데이터가 컨트롤러 범위에 들어오거나 나갈 때 데이터를 필터링하는 선언적 방법을 제공합니다. 필터는 문자열, 배열, 개체 또는 기본 요소와 같은 모든 데이터 개체에 적용할 수 있습니다.

필터는 하나가 true를 반환하거나 모두가 true를 반환하지 않고 실행될 때까지 왼쪽에서 오른쪽으로 실행됩니다. Angular에서 사용자 정의 검색을 구성하는 가장 좋은 방법은 타사 라이브러리를 사용하는 대신 ng2-search-filter 패키지를 사용하는 것입니다.

Angular에서 검색 필터를 만드는 단계

이 섹션에서는 Angular에서 검색 필터를 만드는 데 필요한 단계를 보여줍니다.

Angular CLI 설치

먼저 Angular 애플리케이션을 개발하는 데 사용되는 Angular CLI 도구를 설치합니다. 이 명령을 실행하여 Angular CLI를 설치합니다.

npm install @angular/cli

ng2-search-filter 패키지 설치

두 번째이자 가장 중요한 단계는 ng2-search-filter 패키지를 설치하는 것입니다.

npm i ng2-search-filter

ng2-search-filter는 Angular 앱에 대한 검색 입력 구성 요소를 제공합니다. 사용자가 입력 상자에 입력하여 항목 목록을 필터링할 수 있습니다.

구성 요소는 고도로 구성 가능하며 다양한 데이터 소스를 지원합니다.

모듈 가져오기

세 번째 단계는 앱 모듈 클래스에서 FormsModule 및 Ng2SearchPipeModule을 가져오는 것입니다. 웹사이트에 대한 검색 양식을 만들려면 두 모듈을 모두 가져와야 하기 때문입니다.

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 코드를 작성할 것입니다.

타입스크립트 코드:

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. 검색 필터는 문자열뿐만 아니라 모든 데이터에 사용할 수 있습니다.

여기를 클릭 위의 모든 단계에 대한 라이브 데모를 확인하십시오.