Angular+Material 開発者お役立ち情報

npm 依存関係の解決

　取り敢えず、これで特に困った事はない。

導入手順

　# npm install npm-check-updates

使い方

　依存関係の検査は、以下のコマンドを入力する。

　$ ncu

　依存関係の解決は、以下のコマンドを入力する。

　$ ncu -u

Angular Material お役立ち情報

• アイコンボタンの背景がサンプルと違うんだけど？
→　コンポーネントにマテリアルのボタン（@angular/material/button）をインポートしていない。
• テーブルにフィルター（@angular/material/form-field）を乗せたけど、まともに動きません
→　コンポーネントにマテリアルの入力項目（@angular/material/input）をインポートしていない。
• サイドナビゲート（@angular/material/sidenav）を他のコンポーネントから開閉（toggle）したい
→　コンポーネント間でイベントをルーティングする。
• イベントをルーティングするって？
→　（親→子）@ViewChildでビューへの参照を宣言する。
→　（子→親）親コンポーネントにイベントをエミットする。
　親コンポーネントのHTMLテンプレート上で子コンポーネントのタグ内にイベントを宣言し、起動する親コンポーネントの関数を指定する。
　子コンポーネントでは「@Output()」でイベントエミッタ（EventEmitter）を宣言する。


import { Component, OnInit, EventEmitter, Output } from '@angular/core';
（中略）
@Output() toggleNavigate = new EventEmitter();


• イベントをルーティングしたんだけど、コンポーネント内のsidenavにどうやってアクセスするの？
→　ポイントは「@ViewChild」でコンポーネントへの参照を宣言する。

import { MatSidenav } from '@angular/material/sidenav';
（中略）
@ViewChild('#ComponentIdentity') private $(componentObjectVariableName): MatSidenav;
（中略）
doToggleNavigate() {
　this.navigateBar.toggle();
}


• import { ??? } の「???」は、任意の名前を付けるラベルじゃない。
→　from のモジュールから引っ張り出す機能の名前を意味する。

まとめ

　以上です。