Materialで用意されているツリービューは、デフォルトでキー操作ができないため、自分でカスタマイズする必要があります。今回は矢印キーでツリービューを操作するための一例をご紹介したいと思います。Materialをプロジェクトに導入済みツリービューのひな型を作成するプロジェクトフォルダに移動して、下記のコマンドを実行します。今回はtreeViewというコンポーネント名でひな型を作成します。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クラスに下記のメソッドを全て追加します。{return;}nextSibling.focus();}src/app/tree-view/tree-view-component.htmlを開き、下記の通り修正します。}}</mat-icon>{{node.name}}</mat-tree-node></mat-tree>src/app/app.component.htmlを開き、下記の通り修正します。最後に下記のコマンドを実行して、動作確認をします。-oツリーにフォーカスを当てると矢印キーで操作できることが確認できます。Materialのツリービューを矢印キーで操作する方法でした。システム開発のご相談はこちらからお気軽にお問合せください。コメントをキャンセルメールアドレスが公開されることはありません。/技術コンサルティング、といった総合的な開発ソリューションを展開しています。