ng mat search bar

NgMatSearchBar

Komponen ini membuat ikon pencarian yang memperluas bidang pencarian saat diklik. Lihat demo untuk efeknya:

Instalasi

Instal ketergantungan melalui npm:

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

atau benang

yarn add ng-mat-search-bar

dan impor modul ke aplikasi Anda app.module.ts seperti ini:

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

...

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

Pastikan juga di app.module.ts Anda mengimpor BrowserAnimationsModule , jika tidak, animasi tidak akan berfungsi!

Anda juga perlu menambahkan font web Material Icons dengan menambahkan

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

ke index.html Anda.

Penggunaan

Anda dapat menggunakan komponen dengan pemilihnya:

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

Acara

Anda dapat berlangganan ke berbagai peristiwa berbeda yang dihasilkan komponen:

• onBlur : diaktifkan ketika bidang pencarian kehilangan fokus
• onClose : diaktifkan ketika pengguna menutup kolom pencarian dengan mengklik tombol tutup
• onEnter : diaktifkan ketika pengguna menekan tombol enter di kolom pencarian
• onFocus : diaktifkan ketika pengguna memfokuskan bidang pencarian
• onOpen : diaktifkan ketika bilah pencarian ditampilkan

Metode dan properti

Ia juga menawarkan dua metode umum untuk membuka/menutup bilah pencarian:

• open() : membuka bilah pencarian
• close() : menutup bilah pencarian

dan properti:

• searchVisible : yang menyimpan status visibilitas input pencarian saat ini

Bentuk reaktif

Anda dapat menggunakannya dengan ReactiveFormsModule, dengan meneruskan FormControl sebagai input: mis

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

dan dalam file .ts:

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

Pelengkapan otomatis

Anda juga dapat menggunakannya dikombinasikan dengan pelengkapan otomatis Angular Materials (https://material.angular.io/components/autocomplete/overview). Gunakan saja seperti yang dijelaskan dalam dokumen Angular dan gunakan mat-search-bar sebagai masukannya. Anda juga dapat memeriksa app.component.html/.ts misalnya kode: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Kontribusi

Jangan ragu untuk mengajukan masalah atau mengirimkan PR jika Anda memiliki perbaikan atau menemukan bug.