ngx mat select searchダウンロード - ngx mat select searchソースコードのダウンロード

NgxMatSelectSearch

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

それは何をするのですか？

Angular マテリアルライブラリの MatSelect オプションを検索/フィルタリングするための入力フィールドを提供する Angular コンポーネント。

試してみてください

実際の動作を以下でご覧ください

https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
コード例、ブラウザでのビルド、最新バージョン、マテリアルの最新バージョンを参照してください。
https://bithost-gmbh.github.io/ngx-mat-select-search/
事前構築済み、最新バージョン、古いマテリアルバージョン、モバイルで動作

重要な注意: このプロジェクトは、angular/components#5697 の一時的な実装を目的としています。目標は、公式の Angular マテリアルリポジトリに実装することです。新しい PR が作成されます。

貢献

貢献は大歓迎です。問題をオープンし、できればプルリクエストを提出してください。

サポート開発

私たちは、 NgxMatSelectSearch継続的に改善し、バグレポートに迅速に対応することで、可能な限り最高のサービスを提供することを目指しています。弊社ではこれを完全に無料で行っております。このライブラリがあなたにとって役に立ち、あなたとあなたのビジネスの貴重な時間を節約したと思われる場合は、その維持とさらなる発展をサポートするために寄付を検討してください。

財政的支援者

財政支援者の皆様、本当にありがとうございました！

_{フィリップ・ヴィクトール・シュルツ＝クリングウフ}

協力者

貢献者

コミュニティの貢献者の皆様に心より感謝申し上げます。

_{エステバン・ゲーリング}	_{マルクス・メヒラー}	_{トリスタン}	_サー3e	_{トニー・H}	_{ミハウ・スタヴィツキ}
_{アレイシ・フェレ}	_ヌル	_{ブレイズ・ウォーカー}	_{クリスティアン・ラドゥカヌ}	_{ダミアン・ミランダ}	_{デーン・ヴァンダービルト}
_{デビッド・サンサム}	_{エドガー・シャイヤーマン}	_{エレンディス}	_{グスタボ・ミランダ}	_{ヘンノ・ラウインガー}	_ヌル
_{イブリス・リン}	_{ジャン＝フランソワ・セール}	_{ジョー・デコック}	_{ジョマル・ジョニー}	_{ジョナサン・コルバーグ}	_{クリストフ・ギリス}
_{メルロイ・ヴァン・デン・バーグ}	_{ムハマド・アサン・アヤズ}	_{オビディジュス・ストゥカス}	_{レイ・スエルザー}	_{ロバート・パティス}	_{ローランド・ブルケマ}
_{セバスティアン・ヴィエルズビッキ}	_ヌル	_{スタス・アマセフ}	_{ティエリー・ニッシェルヴィッツァー}	_{ヴラド・イオフェ}	_ヌル
_ヌル	_{ジョシュア}	_ヌル	_ヌル

使い方は？

プロジェクトにngx-mat-select-searchインストールします。

 npm install ngx-mat-select-search

NgxMatSelectSearchModule app.module.tsなどにインポートします。

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

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

ngx-mat-select-searchコンポーネントを<mat-option>要素内に配置して、 mat-select要素内で使用します。

 < 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 >

ngx-mat-select-searchを接続し、使用可能なオプションをフィルタリングする方法については、https://github.com/bithost-gmbh/ngx-mat-select-search/tree/master/src/app/examples の例を参照してください。または、https://github.com/bithost-gmbh/ngx-mat-select-search-example を参照してスタンドアロンアプリで確認してください。

テンプレート駆動型フォーム

代わりに、次のようにテンプレート駆動フォームで使用することもできます。

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

ラベル

ラベルを変更するには、次のように API セクションで指定された入力を使用します。

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

ラベルの変換に i18n API を使用するには、対応するi18n-...属性を追加します。

 < 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 MatSelectModule ( @angular/material/select )

バージョン`6.0.0`

@angular/core : ^15.0.0
@angular/material : MatLegacySelectModuleを使用した^15.0.0 ( @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

API

MatSelectSearchComponentは ControlValueAccessor インターフェイスを実装します。さらに、次の入力を提供します。

入力

  /** 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 > ( ) ;

クリアアイコンをカスタマイズする

検索アイコンをカスタマイズするには、 ngxMatSelectSearchClearカスタムクリアアイテム ( mat-iconまたはその他の要素) に追加し、 ngx-mat-select-searchコンポーネント内に配置します。

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

アイコンのみを変更する必要がある場合は、入力closeIconおよびcloseSvgIcon使用できます。

エントリが見つからない要素をカスタマイズする

エントリが見つかりません要素をカスタマイズするには、 ngxMatSelectNoEntriesFoundカスタム項目 ( mat-icon, span, button 、またはその他の要素) に追加し、 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 >

カスタムコンテンツ

CSS クラスmat-select-search-custom-header-contentのカスタムコンテンツは、次のようにトランスクルージョンできます。

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

グローバルなデフォルトオプション

MAT_SELECTSEARCH_DEFAULT_OPTIONS InjectionToken を提供すると、いくつかの@Input()プロパティのデフォルト値をグローバルに設定できます。 MatSelectSearchComponentの対応する@Input()プロパティのドキュメントを参照してください。

例：

 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 { }

既知の問題

オプションパネルを開いてパネルが画面境界にある場合、現在選択されているオプションが検索入力フィールドの下に隠れる場合があります。

発達

このプロジェクトは、Angular CLI バージョン 1.7.1 で生成されました。

開発サーバー

開発サーバーに対してng serve実行します。 http://localhost:4200/に移動します。ソースファイルを変更すると、アプリは自動的にリロードされます。

建てる

ng build実行してプロジェクトをビルドします。ビルドアーティファクトはdist/ディレクトリに保存されます。実稼働ビルドには-prodフラグを使用します。

ライブラリビルド/NPMパッケージ

npm run build-lib実行してライブラリをビルドし、NPM パッケージを生成します。ビルドアーティファクトはdist-lib/フォルダーに保存されます。

リリースするには、 cd dist-lib/ && npm publishを実行します。

単体テストの実行

npm run test実行して、Karma 経由で単体テストを実行します。

拡大する

ngx mat select search