Angular [Angular] デフォルトのテストコードで基本を覚える
概要ng new で作ったときに、デフォルトで入っているテストのコード「app.component.spec.ts」を解読しながら、テストの基礎的な書き方を覚えていきます。デフォルトプロジェクトのテストコードソースコードを丸ごと持ってきたの...
Angular Angular [Angular] MatSnackBarのテストをする
実践テスト対象ソース以下の単純なスナックバーを表示しているコンポーネントに対してテストする。 スナックバーをMatSnackBarで表示テストソーステストケースはit関数内で、スナックバーのメッセージが一致しているかでテストしています。im...
Angular [Angular] スナックバーをMatSnackBarで表示
実践app.component.tsMatSnackBarのopen関数で、スナックを表示させることができます。引数にdurationを設定すると、表示する時間を設定できます。import { Component } from '@...
Angular [Angular] ダイアログをMatDialogを使って表示する
作るものボタンクリックにより、ダイアログを表示させるコンポーネントを作成ダイアログコンポーネントにパラメータを送るダイアログコンポーネントから、パラメータを受け取る実践ダイアログを呼び出す側のソースMadDialogのopen関数で、ダイア...
Git [Gitコマンド] ブランチの作成・マージ・現在のブランチの確認
現在のブランチの確認以下のコマンドで自分がどのブランチにいるか確認できます。以下ではmasterブランチにいることが分かる。>git branch* masterブランチの作成以下のコマンドでブランチをローカルに作成できます。git che...
Angular AngularをVSCodeでデバッグする方法
デバッグ設定Angularのプロジェクトフォルダ直下にある.vscodeフォルダ内の、launch.jsonにデバッグ時の設定があります。基本的にデフォルトの設定で問題ないです。ポート番号やブラウザなどを変えたければ変えればいい感じです。{...
Angular mat-tableのフィルターをfilterPredicateを使って行う[Angular]
filterPredicateとはmat-tableにあるデフォルトのフィルタリング動作が設定されているので、ここにオーバーライドすることで上書きできるメソッド。フィルタの処理をカスタマイズしたい場合は、ここの処理の戻り値を、抽出OKならt...
Angular Angular Materialのテーブルをmat-tableで作ってみる
作ったテーブルソースコードapp.module.tsここでは、MatTableModuleをインポートする。import { NgModule } from '@angular/core';import { BrowserM...
Angular [AngularMaterial] 環境構築・インストールする
インストールするAngularのプロジェクトにカレントディレクトリを移動して、以下のコマンドを実行します。ng add @angular/material以下のメッセージは、インストールするかどうかのメッセージなので、yを選択します。The...
Angular [Angular] EventEmitterの使い方
EventEmitterとはカスタムイベントを作成するのに使われる。例えば、呼び出し先のコンポーネントでイベントが発生した場合、呼び出し元でイベントを検知して処理できる。実践button.component側で発生したイベントを、app.c...