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 : срабатывает, когда пользователь нажимает кнопку ввода в поле поиска.
• 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/comComponents/autocomplete/overview). Просто используйте его, как описано в документации Angular, и используйте mat-search-bar в качестве входных данных. Также вы можете проверить пример кода app.component.html/.ts : https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Взносы

Пожалуйста, не стесняйтесь сообщать о проблеме или отправлять PR, если у вас есть какие-либо улучшения или обнаружены ошибки.