ng mat search bar

NgMatSearchBar

このコンポーネントは、クリックすると検索フィールドを展開する検索アイコンを作成します。効果についてはデモをご覧ください。

インストール

npm 経由で依存関係をインストールします。

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

または糸

yarn add ng-mat-search-bar

次のようにモジュールをアプリapp.module.tsにインポートします。

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

...

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

また、 app.module.tsでBrowserAnimationsModuleインポートしていることを確認してください。そうしないと、アニメーションが機能しません。

追加してマテリアル アイコン Web フォントを追加する必要もあります。

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

あなたのindex.htmlに。

使用法

コンポーネントをセレクターとともに使用できます。

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

イベント

コンポーネントが出力するさまざまなイベントをサブスクライブできます。

• onBlur : 検索フィールドがフォーカスを失ったときに発生します
• onClose : ユーザーが閉じるボタンをクリックして検索フィールドを閉じると発生します。
• onEnter : ユーザーが検索フィールドで Enter ボタンを押したときに起動されます。
• onFocus : ユーザーが検索フィールドにフォーカスしたときに起動されます
• onOpen : 検索バーが表示されたときに起動されます。

メソッドとプロパティ

また、検索バーを開閉するための 2 つのパブリック メソッドも提供します。

• open() : 検索バーを開きます
• close() : 検索バーを閉じます

そしてプロパティ:

• searchVisible : 検索入力の現在の可視性状態を保持します。

反応性フォーム

FormControl入力として渡すことで、ReactiveFormsModule で使用できます。

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

.ts ファイル内:

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

オートコンプリート

Angular マテリアルのオートコンプリート (https://material.angular.io/components/autocomplete/overview) と組み合わせて使用​​することもできます。 Angular ドキュメントの説明に従ってこれを使用し、その入力としてmat-search-bar使用します。また、 app.component.html/.tsのコード例を確認することもできます: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

貢献

改善点やバグが見つかった場合は、遠慮なく問題を報告したり、PR を送信してください。