ng mat search bar

NgMatSearchBar

Le composant crée une icône de recherche qui développe un champ de recherche en un clic. Voir la démo pour l'effet :

Installation

Installez la dépendance via npm :

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

ou du fil

yarn add ng-mat-search-bar

et importez le module dans vos applications app.module.ts comme ceci :

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

...

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

Assurez-vous également que dans votre app.module.ts vous importez le BrowserAnimationsModule , sinon les animations ne fonctionneront pas !

Vous devez également ajouter la police Web Material Icons en ajoutant

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

à votre index.html .

Usage

Vous pouvez utiliser le composant avec son sélecteur :

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

Événements

Vous pouvez vous abonner aux différents événements générés par le composant :

• onBlur : déclenché lorsque le champ de recherche perd le focus
• onClose : déclenché lorsque l'utilisateur ferme le champ de recherche en cliquant sur le bouton de fermeture
• onEnter : déclenché lorsque l'utilisateur appuie sur le bouton Entrée dans le champ de recherche
• onFocus : déclenché lorsque l'utilisateur concentre le champ de recherche
• onOpen : déclenché lorsque la barre de recherche est affichée

Méthodes et propriétés

Il propose également deux méthodes publiques pour ouvrir/fermer la barre de recherche :

• open() : ouvre la barre de recherche
• close() : ferme la barre de recherche

et une propriété :

• searchVisible : qui contient l'état de visibilité actuel de l'entrée de recherche

Formes réactives

Vous pouvez l'utiliser avec ReactiveFormsModule, en passant un FormControl en entrée : par exemple

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

et dans le fichier .ts :

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

Saisie semi-automatique

Vous pouvez également l'utiliser en combinaison avec la saisie semi-automatique Angular Materials (https://material.angular.io/components/autocomplete/overview). Utilisez-le simplement comme décrit dans la documentation angulaire et utilisez la mat-search-bar comme entrée. Vous pouvez également consulter le app.component.html/.ts par exemple de code : https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Cotisations

N'hésitez pas à signaler un problème ou à envoyer un PR si vous avez des améliorations ou si vous avez trouvé des bugs.