Layout header や footer 等 全てのページで使われるパーツ ng g component layouts/componentName Pages ページごとのコンテンツを表示するページ ng g component pages/componentName Parts layout や page で使われるカードなどの UI パーツ ng g component parts/componentName テストをするためには必要だが、無駄なファイルを増やさないために ng generate component componentName --skip-tests でspecファイルを作らずに済む。 コンポーネントを呼び出したい <app-componentName></app-componentName> で、コンポーネントを呼び込む。
Angular Material UIのカラーパレットがどうにもパッとしない。 ということで、カスタムカラーを使用することにした。 カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。 さて、さっそくカスタムカラーを設定していく。 手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。 なので、まずは自作のパレットを作成する。 src/assets/_palette.scssを作成し、そこにカラーを書いていく。 例えばこんな感じに。 $custom-primary: ( 50: #e8f5ff, 100: #c5e5ff, 200: #9fd4ff, 300: #78c2ff, 400: #5bb5ff, 500: #3ea8ff, 600: #38a0ff, 700: #3097ff, 800: #288dff, 900: #1b7dff, A100: #ffffff, A200: #ffffff, A400: #cce0ff, A700: #b3d1ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); 次に、このパレットを読み込む必要があるので、src/styles....
独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。 AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。 が、そのモジュールなしで使いこなすことは難しい。 その筆頭がmaterial UIである。 material UIとは？ material UIはこちら。 要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。 大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。 とは言え、面倒な処理はやってくれるので、非常に重宝する。 いざ、インストール それでは実際にインストールしてみる。 $ ng add @angular/material 上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。 ℹ Using package manager: npm ✔ Found compatible package version: @angular/material@12.2.13. ✔ Package information loaded. The package @angular/material@12.2.13 will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. ? Choose a prebuilt theme name, or "custom" for a custom theme: Custom ? Set up global Angular Material typography styles?...
Angularを業務で使用することがあり、かつバージョンが12指定とのことだった。 ちなみに現在のAngularのバージョンは13なので、普通にインストールすると13がインストールされる。 そこで12を指定し、インストールする方法を調べてみた。 Angular12をインストールする バージョン指定でインストールする方法は別段他の言語と変わりなく、ただただ末尾に指定バージョンを記載するだけでOK。 $ npm install -g @angular/cli@12.0.0 つまりこんな感じすれば12がインストールされる。 バージョンを確認する きっと問題ないけど、念のためにバージョンを確認する。 $ ng v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 12....
特定の倍数に数値をまとめたい。 なにをいっているのだろうと思われたかもしれないので、実例をどうぞ。 実例 ユーザーが数値を入れるインプットエリアがあるとする。 ユーザーは任意の数字を入れることができる。 その結果を10の倍数にまとめたい。 つまり、24とユーザーが記入した場合は「20」が期待値になる。 ということがやりたい。 実装方法 じゃ、どうするのか。 まずは実装済みのものをどうぞ↓（うまくコンパイルできない時があるので、下の更新ボタンをクリックしてください） inputエリアに数字を入れていくと、5で10、14で10、15で20になっていることが確認できる。 つまり24と入力すれば「20」が表示される、期待値通り。 特定の倍数に数値をまとめるコード const changeNumber = () => { const unit = 10; const el = Math.round(num.value); result.value = Math.round(el / unit) * unit; }; inputエリアのvalueが更新された時、 まずはvalueを丸める。 つまり、2は0、5は10になる。 その値を最初に定義した値（丸めたい倍数）で計算する。 実際に24が入力された時、 24を丸めて20にする。 その値を10で割って10でかける。 20 / 10 * 10 = 20 結果20になる。 なんかこうやってみるともっと簡単な方法がある？ まあ、期待値は取り出せたので、良しとする。 理系の人、ぜひ教えてください。