ngx mat select search
v7.0.0
https://github.com/bithost-gmbh/ngx-mat-select-search
Angular-Komponente, die ein Eingabefeld zum Suchen/Filtern von MatSelect-Optionen der Angular-Materialbibliothek bereitstellt.
Sehen Sie es in Aktion unter
https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
siehe Beispielcode, Builds im Browser, neueste Version, neueste Materialversion
https://bithost-gmbh.github.io/ngx-mat-select-search/
vorgefertigt, neueste Version, ältere Materialversion, funktioniert auf Mobilgeräten
Wichtiger Hinweis : Dieses Projekt ist als vorübergehende Implementierung von Angular/Components#5697 gedacht. Ziel ist eine Implementierung im offiziellen Angular Material Repository, eine neue PR wird erstellt.
Beiträge sind willkommen. Bitte öffnen Sie ein Problem und reichen Sie vorzugsweise einen Pull-Request ein.
Unser Ziel ist es, den bestmöglichen Service zu bieten, indem wir NgxMatSelectSearch ständig verbessern und schnell auf Fehlerberichte reagieren. Wir machen dies völlig kostenlos. Wenn Sie das Gefühl haben, dass diese Bibliothek für Sie nützlich war und Ihnen und Ihrem Unternehmen wertvolle Zeit gespart hat, denken Sie bitte über eine Spende nach, um ihre Wartung und Weiterentwicklung zu unterstützen.
Vielen Dank an unsere finanziellen Unterstützer!
Philip Viktor Schulz-Klingauf |
Vielen Dank an alle unsere Community-Mitwirkenden!
Esteban Gehring | Markus Mächler | Tristan | Sirh3e | Tony H | Michał Stawicki |
Aleix Ferré | Null | Blaze Walker | Cristian Raducanu | Damian Miranda | Dane Vanderbilt |
David Sansome | Edgar Scheiermann | Erendis | Gustavo Miranda | Henno Lauinger | Null |
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 | Null | Stas Amasev | Thierry Nischelwitzer | Vlad Ioffe | Null |
Null | Joshua | Null | Null |
Installieren Sie ngx-mat-select-search in Ihrem Projekt:
npm install ngx-mat-select-search
Importieren Sie das NgxMatSelectSearchModule z. B. in Ihre app.module.ts :
import { MatSelectModule } from '@angular/material' ;
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search' ;
@ NgModule ( {
imports : [
...
MatSelectModule ,
NgxMatSelectSearchModule
] ,
} )
export class AppModule { } Verwenden Sie die ngx-mat-select-search Komponente innerhalb eines mat-select Elements, indem Sie sie in ein <mat-option> -Element platzieren:
< 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 > Sehen Sie sich die Beispiele unter https://github.com/bithost-gmbh/ngx-mat-select-search/tree/master/src/app/examples an, wie Sie die ngx-mat-select-search vernetzen und die verfügbaren Optionen filtern. Oder werfen Sie einen Blick auf https://github.com/bithost-gmbh/ngx-mat-select-search-example, um es in einer eigenständigen App zu sehen.
Sie können es alternativ wie folgt mit vorlagengesteuerten Formularen verwenden:
< ngx-mat-select-search ngModel (ngModelChange) =" filterMyOptions($event) " >Um die Bezeichnungen zu ändern, verwenden Sie die im API-Abschnitt angegebenen Eingaben wie folgt:
< ngx-mat-select-search [formControl] =" bankFilterCtrl "
placeholderLabel =" Find bank... "
noEntriesFoundLabel =" 'no matching bank found' " > </ ngx-mat-select-search > Um die i18n-API zur Übersetzung der Beschriftungen zu verwenden, fügen Sie die entsprechenden i18n-... Attribute hinzu:
< ngx-mat-select-search [formControl] =" bankFilterCtrl "
placeholderLabel =" Find bank... "
i18n-placeholderLabel
noEntriesFoundLabel =" 'no matching bank found' "
i18n-noEntriesFoundLabel > </ ngx-mat-select-search >@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 mit MatSelectModule ( @angular/material/select ) 6.0.0@angular/core : ^15.0.0@angular/material : ^15.0.0 mit MatLegacySelectModule ( @angular/material/legacy-select ) 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 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 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 Die MatSelectSearchComponent implementiert die ControlValueAccessor-Schnittstelle. Darüber hinaus bietet es folgende Eingaben:
/** 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 > ( ) ;
Um das Suchsymbol anzupassen, fügen Sie ngxMatSelectSearchClear zu Ihrem benutzerdefinierten Löschelement (einem mat-icon oder einem anderen Element) hinzu und platzieren Sie es in der ngx-mat-select-search Komponente:
< ngx-mat-select-search >
< mat-icon ngxMatSelectSearchClear > delete </ mat-icon >
</ ngx-mat-select-search > Soll nur das Icon geändert werden, können die Eingänge closeIcon und closeSvgIcon verwendet werden.
Um das Element „Keine Einträge gefunden“ anzupassen, fügen Sie ngxMatSelectNoEntriesFound zu Ihrem benutzerdefinierten Element hinzu (ein mat-icon, span, button oder ein anderes Element) und platzieren Sie es in der Komponente 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 > Benutzerdefinierte Inhalte mit der CSS-Klasse mat-select-search-custom-header-content können wie folgt transkludiert werden:
< ngx-mat-select-search >
< div class =" mat-select-search-custom-header-content " > something special </ div >
</ ngx-mat-select-search > Durch die Bereitstellung des MAT_SELECTSEARCH_DEFAULT_OPTIONS InjectionToken können die Standardwerte mehrerer @Input() Eigenschaften global festgelegt werden. Weitere Informationen finden Sie in der Dokumentation der entsprechenden @Input() -Eigenschaften von MatSelectSearchComponent .
Beispiel:
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 { } Dieses Projekt wurde mit Angular CLI Version 1.7.1 generiert.
Führen Sie ng serve für einen Entwicklungsserver aus. Navigieren Sie zu http://localhost:4200/ . Die App wird automatisch neu geladen, wenn Sie eine der Quelldateien ändern.
Führen Sie ng build aus, um das Projekt zu erstellen. Die Build-Artefakte werden im Verzeichnis dist/ gespeichert. Verwenden Sie das Flag -prod für einen Produktionsbuild.
Führen Sie npm run build-lib aus, um die Bibliothek zu erstellen und ein NPM-Paket zu generieren. Die Build-Artefakte werden im Ordner dist-lib/ gespeichert.
Führen Sie zum Veröffentlichen cd dist-lib/ && npm publish aus.
Führen Sie npm run test aus, um die Komponententests über Karma auszuführen.
