ng mat search bar

NgMatBúsquedaBar

El componente crea un icono de búsqueda que expande un campo de búsqueda al hacer clic. Vea la demostración del efecto:

Instalación

Instale la dependencia a través de npm:

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

o hilo

yarn add ng-mat-search-bar

e importe el módulo a su aplicación app.module.ts de esta manera:

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

...

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

También asegúrese de que en su app.module.ts importe BrowserAnimationsModule ; de ​​lo contrario, las animaciones no funcionarán.

También necesita agregar la fuente web Material Icons agregando

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

a su index.html .

Uso

Puedes usar el componente con su selector:

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

Eventos

Puede suscribirse a los diferentes eventos que genera el componente:

• onBlur : se activa cuando el campo de búsqueda pierde el foco
• onClose : se activa cuando el usuario cierra el campo de búsqueda haciendo clic en el botón de cerrar
• onEnter : se activa cuando el usuario presiona el botón Intro en el campo de búsqueda
• onFocus : se activa cuando el usuario enfoca el campo de búsqueda
• onOpen : se activa cuando se muestra la barra de búsqueda

Métodos y propiedades

También ofrece dos métodos públicos para abrir/cerrar la barra de búsqueda:

• open() : abre la barra de búsqueda
• close() : cierra la barra de búsqueda

y una propiedad:

• searchVisible : que mantiene el estado de visibilidad actual de la entrada de búsqueda

Formas reactivas

Puedes usarlo con ReactiveFormsModule, pasando un FormControl como entrada: por ejemplo

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

y en el archivo .ts:

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

Autocompletar

También puede usarlo combinado con el autocompletado de Angular Materials (https://material.angular.io/components/autocomplete/overview). Simplemente utilícelo como se describe en los documentos de Angular y use la mat-search-bar como entrada. También puede consultar el código app.component.html/.ts por ejemplo: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Contribuciones

No dude en presentar un problema o enviar un PR si tiene alguna mejora o encuentra errores.