ng mat search bar

NgMatSearchBar

Die Komponente erstellt ein Suchsymbol, das beim Klicken ein Suchfeld erweitert. Sehen Sie sich die Demo für den Effekt an:

Installation

Installieren Sie die Abhängigkeit über npm:

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

oder Garn

yarn add ng-mat-search-bar

und importieren Sie das Modul wie folgt in Ihre Apps app.module.ts :

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

...

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

Stellen Sie außerdem sicher, dass Sie in Ihrem app.module.ts das BrowserAnimationsModule importieren, da die Animationen sonst nicht funktionieren!

Sie müssen auch die Webfont „Material Icons“ hinzufügen, indem Sie hinzufügen

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

zu Ihrer index.html .

Verwendung

Sie können die Komponente mit ihrem Selektor verwenden:

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

Veranstaltungen

Sie können die verschiedenen Ereignisse abonnieren, die die Komponente ausgibt:

• onBlur : wird ausgelöst, wenn das Suchfeld den Fokus verliert
• onClose : wird ausgelöst, wenn der Benutzer das Suchfeld schließt, indem er auf die Schaltfläche „Schließen“ klickt
• onEnter : wird ausgelöst, wenn der Benutzer die Eingabetaste im Suchfeld drückt
• onFocus : wird ausgelöst, wenn der Benutzer das Suchfeld fokussiert
• onOpen : wird ausgelöst, wenn die Suchleiste angezeigt wird

Methoden und Eigenschaften

Es bietet außerdem zwei öffentliche Methoden zum Öffnen/Schließen der Suchleiste:

• open() : öffnet die Suchleiste
• close() : Schließt die Suchleiste

und eine Eigenschaft:

• searchVisible : Enthält den aktuellen Sichtbarkeitsstatus der Sucheingabe

Reaktive Formen

Sie können es mit ReactiveFormsModule verwenden, indem Sie ein FormControl als Eingabe übergeben: z. B

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

und in der .ts-Datei:

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

Automatische Vervollständigung

Sie können es auch in Kombination mit der automatischen Vervollständigung von Angular Materials verwenden (https://material.angular.io/components/autocomplete/overview). Verwenden Sie es einfach wie in den Angular-Dokumenten beschrieben und verwenden Sie die mat-search-bar als Eingabe dafür. Sie können sich auch den Beispielcode app.component.html/.ts ansehen: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Beiträge

Bitte zögern Sie nicht, ein Problem einzureichen oder eine PR einzusenden, wenn Sie Verbesserungen haben oder Fehler gefunden haben.