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。