ngx mat select search Unduh - ngx mat select search Unduh kode sumber

NgxMatSelectSearch

https://github.com/bithost-gmbh/ngx-mat-select-search

Apa fungsinya?

Komponen sudut menyediakan kolom input untuk mencari/memfilter opsi MatSelect dari perpustakaan Material Angular.

Contoh

Cobalah

Lihat aksinya di

https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
lihat contoh kode, versi bawaan browser, versi terbaru, versi material terbaru
https://bithost-gmbh.github.io/ngx-mat-select-search/
dibuat sebelumnya, versi terbaru, versi material lama, berfungsi di perangkat seluler

Catatan Penting : Proyek ini dimaksudkan sebagai implementasi sementara dari sudut/komponen#5697. Tujuannya agar ada implementasi di repositori resmi Angular Material, PR baru akan dibuat.

Kontribusi

Kontribusi dipersilahkan, silakan buka terbitan dan sebaiknya ajukan permintaan penarikan.

Mendukung Pembangunan

Kami bertujuan untuk memberikan layanan terbaik dengan terus meningkatkan NgxMatSelectSearch dan merespons laporan bug dengan cepat. Kami melakukan ini sepenuhnya tanpa biaya. Jika Anda merasa perpustakaan ini berguna bagi Anda dan menghemat waktu berharga Anda dan bisnis Anda, mohon pertimbangkan untuk memberikan donasi untuk mendukung pemeliharaan dan pengembangan lebih lanjut.

Pendukung Keuangan

Terima kasih banyak kepada pendukung keuangan kami!

_{Philip Viktor Schulz-Klingauf}

Kolaborator

Kontributor

Terima kasih banyak kepada semua kontributor komunitas kami!

_{Esteban Gehring}	_{Markus Machler}	_Tristan	_Sirh3e	_{Tony H}	_{Michał Stawicki}
_{Aleix Ferre}	_Batal	_{Pejalan Api}	_{Cristian Raducanu}	_{Damian Miranda}	_{Vanderbilt dari Denmark}
_{David Sansome}	_{Edgar Scheiermann}	_Erendis	_{Gustavo Miranda}	_{Henno Lauinger}	_Batal
_{Iblis Lin}	_{Jean-Francois Cere}	_{Joe DeCock}	_{Jomal Johny}	_{Jonathan Kolberg}	_{Kristof Gilis}
_{Melroy Van Den Berg}	_{Muhammad Ahsan Ayaz}	_{Ovidijus Stukas}	_{Ray Suelzer}	_{Robert Pattis}	_{Roland Broekema}
_{Sebastian Wierzbicki}	_Batal	_{Stas Amasev}	_{Thierry Nischelwitzer}	_{Vlad Ioffe}	_Batal
_Batal	_Yosua	_Batal	_Batal

Bagaimana cara menggunakannya?

Instal ngx-mat-select-search di proyek Anda:

 npm install ngx-mat-select-search

Impor NgxMatSelectSearchModule misalnya di app.module.ts Anda:

 import { MatSelectModule } from '@angular/material' ;
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search' ;

@ NgModule ( {
  imports : [
    ...
    MatSelectModule ,
    NgxMatSelectSearchModule
  ] ,
} )
export class AppModule { }

Gunakan komponen ngx-mat-select-search di dalam elemen mat-select dengan menempatkannya di dalam elemen <mat-option> :

 < mat-form-field >
  < mat-select [formControl] =" bankCtrl " placeholder =" Bank " #singleSelect >
    < mat-option >
      < ngx-mat-select-search [formControl] =" bankFilterCtrl " > </ ngx-mat-select-search >
    </ mat-option >
    < mat-option *ngFor =" let bank of filteredBanks | async " [value] =" bank " >
      {{bank.name}}
    </ mat-option >
  </ mat-select >
</ mat-form-field >

Lihat contoh di https://github.com/bithost-gmbh/ngx-mat-select-search/tree/master/src/app/examples cara menyambungkan ngx-mat-select-search dan memfilter opsi yang tersedia. Atau lihat di https://github.com/bithost-gmbh/ngx-mat-select-search-example untuk melihatnya di aplikasi mandiri.

Formulir berdasarkan templat

Sebagai alternatif, Anda dapat menggunakannya dengan formulir berbasis templat sebagai berikut:

 < ngx-mat-select-search ngModel (ngModelChange) =" filterMyOptions($event) " >

Label

Untuk mengubah label, gunakan input yang ditentukan di bagian API sebagai berikut:

 < ngx-mat-select-search [formControl] =" bankFilterCtrl " 
                       placeholderLabel =" Find bank... " 
                       noEntriesFoundLabel =" 'no matching bank found' " > </ ngx-mat-select-search >

Untuk menggunakan API i18n untuk penerjemahan label, tambahkan atribut i18n-... yang sesuai:

 < ngx-mat-select-search [formControl] =" bankFilterCtrl " 
                       placeholderLabel =" Find bank... " 
                       i18n-placeholderLabel
                       noEntriesFoundLabel =" 'no matching bank found' "
                       i18n-noEntriesFoundLabel > </ ngx-mat-select-search >

Kesesuaian

Rilis saat ini

@angular/core : ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@angular/material : ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 dengan MatSelectModule ( @angular/material/select )

Versi `6.0.0`

@angular/core : ^15.0.0
@angular/material : ^15.0.0 dengan MatLegacySelectModule ( @angular/material/legacy-select )

Versi `5.0.0`

@angular/core : ^12.0.0 || ^13.0.0 || ^14.0.0
@angular/material : ^12.0.0 || ^13.0.0 || ^14.0.0

Versi `3.3.3`

@angular/core : ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
@angular/material : ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0

Versi `1.8.0`

@angular/core : ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
@angular/material : ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0

API

MatSelectSearchComponent mengimplementasikan antarmuka ControlValueAccessor. Selain itu, ia memberikan masukan berikut:

Masukan

  /** Label of the search placeholder */
  @ Input ( ) placeholderLabel = 'Suche' ;

  /** Type of the search input field */
  @ Input ( ) type = 'text' ;

  /** Font-based icon used for displaying Close-Icon */
  @ Input ( ) closeIcon = 'close' ;

  /** SVG-based icon used for displaying Close-Icon. If set, closeIcon is overridden */
  @ Input ( ) closeSvgIcon ?: string ;

  /** Label to be shown when no entries are found. Set to null if no message should be shown. */
  @ Input ( ) noEntriesFoundLabel = 'Keine Optionen gefunden' ;

  /**
   * Whether the search field should be cleared after the dropdown menu is closed.
   * Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3)
   */
  @ Input ( ) clearSearchInput = true ;

  /** Whether to show the search-in-progress indicator */
  @ Input ( ) searching = false ;

  /** Disables initial focusing of the input field */
  @ Input ( ) disableInitialFocus = false ;

  /** Enable clear input on escape pressed */
  @ Input ( ) enableClearOnEscapePressed = false ;

  /**
   * Prevents home / end key being propagated to mat-select,
   * allowing to move the cursor within the search input instead of navigating the options
   */
  @ Input ( ) preventHomeEndKeyPropagation = false ;

  /** Disables scrolling to active options when option list changes. Useful for server-side search */
  @ Input ( ) disableScrollToActiveOnOptionsChanged = false ;

  /** Adds 508 screen reader support for search box */
  @ Input ( ) ariaLabel = 'dropdown search' ;

  /** Whether to show Select All Checkbox (for mat-select[multi=true]) */
  @ Input ( ) showToggleAllCheckbox = false ;

  /** Select all checkbox checked state */
  @ Input ( ) toggleAllCheckboxChecked = false ;

  /** select all checkbox indeterminate state */
  @ Input ( ) toggleAllCheckboxIndeterminate = false ;

  /** Display a message in a tooltip on the toggle-all checkbox */
  @ Input ( ) toggleAllCheckboxTooltipMessage = '' ;

  /** Define the position of the tooltip on the toggle-all checkbox. */
  @ Input ( ) toggleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after' = 'below' ;

  /** Show/Hide the search clear button of the search input */
  @ Input ( ) hideClearSearchButton = false ;

  /**
   * Always restore selected options on selectionChange for mode multi (e.g. for lazy loading/infinity scrolling).
   * Defaults to false, so selected options are only restored while filtering is active.
   */
  @ Input ( ) alwaysRestoreSelectedOptionsMulti = false ;

  /**
   * Recreate array of selected values for multi-selects.
   *
   * This is useful if the selected values are stored in an immutable data structure.
   */
  @ Input ( ) recreateValuesArray = false ;
  
  /** Output emitter to send to parent component with the toggle all boolean */
  @ Output ( ) toggleAll = new EventEmitter < boolean > ( ) ;

Sesuaikan ikon yang jelas

Untuk menyesuaikan ikon pencarian, tambahkan ngxMatSelectSearchClear ke item kustom Anda yang jelas ( mat-icon atau elemen lainnya) dan letakkan di dalam komponen ngx-mat-select-search :

 < ngx-mat-select-search >
   < mat-icon ngxMatSelectSearchClear > delete </ mat-icon >
</ ngx-mat-select-search >

Jika hanya ikon yang diubah, input closeIcon dan closeSvgIcon dapat digunakan.

Sesuaikan elemen tidak ada entri yang ditemukan

Untuk menyesuaikan elemen tidak ada entri yang ditemukan, tambahkan ngxMatSelectNoEntriesFound ke item khusus Anda ( mat-icon, span, button , atau elemen lainnya) dan letakkan di dalam komponen ngx-mat-select-search :

 < ngx-mat-select-search >
  < span ngxMatSelectNoEntriesFound >
    No entries found
    < button mat-button color =" primary " >
      Add < mat-icon > add </ mat-icon >
    </ button >
</ span >
</ ngx-mat-select-search >

Konten khusus

Konten khusus dengan kelas CSS mat-select-search-custom-header-content dapat ditransklusikan sebagai berikut:

 < ngx-mat-select-search >
   < div class =" mat-select-search-custom-header-content " > something special </ div >
</ ngx-mat-select-search >

Opsi default global

Dengan menyediakan MAT_SELECTSEARCH_DEFAULT_OPTIONS InjectionToken, nilai default beberapa properti @Input() dapat disetel secara global. Lihat dokumentasi properti @Input() yang sesuai dari MatSelectSearchComponent .

Contoh:

 import { MAT_SELECTSEARCH_DEFAULT_OPTIONS , MatSelectSearchOptions } from 'ngx-mat-select-search' ;

@ NgModule ( {
  ...
  providers : [
    {
      provide : MAT_SELECTSEARCH_DEFAULT_OPTIONS ,
      useValue : < MatSelectSearchOptions > {
        closeIcon : 'delete' ,
        noEntriesFoundLabel : 'No options found' ,
      }
    }
  ]
} )
class AppModule { }

Masalah yang Diketahui

Opsi yang dipilih saat ini mungkin tersembunyi di bawah kolom input pencarian saat membuka panel opsi dan panel berada di tepi layar.

Perkembangan

Proyek ini dibuat dengan Angular CLI versi 1.7.1.

Server pengembangan

Jalankan ng serve untuk server dev. Arahkan ke http://localhost:4200/ . Aplikasi akan dimuat ulang secara otomatis jika Anda mengubah salah satu file sumber.