ng mat search bar

NgMatSearchBar

구성요소는 클릭 시 검색 필드를 확장하는 검색 아이콘을 생성합니다. 효과에 대한 데모를 참조하세요.

설치

npm을 통해 종속성을 설치합니다.

npm install ng-mat-search-bar --save

또는 실

yarn add ng-mat-search-bar

다음과 같이 모듈을 앱 app.module.ts 로 가져옵니다.

 import { NgMatSearchBarModule } from 'ng-mat-search-bar' ;

...

@ NgModule ( {
  ... ,
  imports : [
    ... ,
    NgMatSearchBarModule
  ] ,
  ...
} )

또한 app.module.ts 에서 BrowserAnimationsModule 을 가져왔는지 확인하세요. 그렇지 않으면 애니메이션이 작동하지 않습니다!

또한 다음을 추가하여 Material Icons 웹 글꼴을 추가해야 합니다.

 < link
  href =" https://fonts.googleapis.com/icon?family=Material+Icons "
  rel =" stylesheet "
/>

귀하의 index.html 에.

용법

선택기와 함께 구성 요소를 사용할 수 있습니다.

 <mat-search-bar></mat-search-bar>

이벤트

구성 요소가 출력하는 다양한 이벤트를 구독할 수 있습니다.

• onBlur : 검색 필드가 포커스를 잃으면 실행됩니다.
• onClose : 사용자가 닫기 버튼을 클릭하여 검색 필드를 닫을 때 실행됩니다.
• onEnter : 사용자가 검색 필드에서 Enter 버튼을 누르면 실행됩니다.
• onFocus : 사용자가 검색 필드에 초점을 맞추면 실행됩니다.
• onOpen : 검색창이 표시되면 실행됩니다.

방법 및 속성

또한 검색창을 열고 닫는 두 가지 공개 방법도 제공합니다.

• open() : 검색창을 엽니다.
• close() : 검색창을 닫습니다.

그리고 속성:

• searchVisible : 검색 입력의 현재 가시성 상태를 보유합니다.

반응성 형태

FormControl 입력으로 전달하여 ReactiveFormsModule과 함께 사용할 수 있습니다. 예:

...
< mat-search-bar [formControl] =" control " > </ mat-search-bar >
...

.ts 파일에서:

  ...@ Component ( { } ) ...
    control: FormControl = new FormControl ( '' ) ;
  ...

자동완성

Angular Materials 자동완성(https://material.angular.io/comComponents/autocomplete/overview)과 결합하여 사용할 수도 있습니다. Angular 문서에 설명된 대로 사용하고 mat-search-bar 입력으로 사용하세요. 또한 app.component.html/.ts 에서 예제 코드를 확인할 수 있습니다: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

기여

개선 사항이 있거나 버그를 발견한 경우 주저하지 말고 문제를 제기하거나 PR을 보내주세요.