Angular Materialのツリービューをキー操作できるようにカスタマイズする

はじめに

Angular Materialで用意されているツリービューは、デフォルトでキー操作ができないため、自分でカスタマイズする必要があります。今回は矢印キーでツリービューを操作するための一例をご紹介したいと思います。

環境

  • Angular CLI 8.2.2
  • Angular 8.2.14
  • Angular Material 8.2.3

前提

  • Angular CLIでプロジェクトを作成済み
  • Angular Materialをプロジェクトに導入済み

ツリービューのひな型を作成する

プロジェクトフォルダに移動して、下記のコマンドを実行します。
今回はtreeViewというコンポーネント名でひな型を作成します。

コマンドを実行するとsrc/appフォルダ配下に下記のファイルが生成されます。
src/app
└─tree-view
       └─example-data.ts
       └─tree-view.component.css
       └─tree-view.component.html
       └─tree-view.component.spec.ts
       └─tree-view.component.ts

ツリービューを矢印キーで操作できるようにカスタマイズする

src/app/tree-view/tree-view-component.tsを開き、TreeViewComponentクラスに下記のメソッドを全て追加します。

src/app/tree-view/tree-view-component.htmlを開き、下記の通り修正します。

src/app/app.component.htmlを開き、下記の通り修正します。

動作確認

最後に下記のコマンドを実行して、動作確認をします。

ツリーにフォーカスを当てると矢印キーで操作できることが確認できます。

以上がAngular Materialのツリービューを矢印キーで操作する方法でした。


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です