ng mat search bar

NgMat搜尋欄

該元件會建立一個搜尋圖標，點擊該圖標即可展開搜尋欄位。效果見demo：

安裝

透過 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 webfont

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

到你的index.html 。

用法

您可以使用該組件及其選擇器：

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

活動

您可以訂閱元件輸出的不同事件：

• onBlur ：當搜尋欄位失去焦點時觸發
• onClose ：當使用者透過點擊關閉按鈕關閉搜尋欄位時觸發
• onEnter ：當使用者在搜尋欄位中按下回車按鈕時觸發
• onFocus ：當使用者聚焦搜尋欄位時觸發
• onOpen ：顯示搜尋欄時觸發

方法和屬性

它還提供了兩種打開/關閉搜尋欄的公共方法：

• open() ：開啟搜尋列
• close() ：關閉搜尋欄

和一個屬性：

• searchVisible ：儲存搜尋輸入的目前可見性狀態

反應形式

您可以將它與 ReactiveFormsModule 一起使用，並透過傳遞FormControl作為輸入：例如

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

並在 .ts 文件中：

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

自動完成

您也可以將其與 Angular Materials 自動完成功能 (https://material.angular.io/components/autocomplete/overview) 結合使用。只需按照 Angular 文件中的描述使用它，並使用mat-search-bar作為它的輸入。您也可以檢查app.component.html/.ts的範例程式碼：https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

貢獻

如果您有任何改進或發現錯誤，請隨時提出問題或發送 PR。