Angular mat-dialogをドラッグさせる[Angular Material] mat-dialogをドラッグさせる Angular Materialのダイアログをドラッグさせるようにしていきます。以下を参考に、ダイアログのドラッグ機能を追加します。また、DragDropModuleを使うのでインポートする必要... 2022.08.06 Angular
Angular mat-dialogのヘッダーを作るのに余計なスペースを削除する [Angular] mat-dialogのヘッダーについて 以下のように、Angular MaterialのDialogを使って、ヘッダーを作ろうとすると余白が入ってしまう。 <h1 mat-dialog-title>ヘッダータイトル... 2022.07.26 Angular
Angular [Angular] テンプレート側でメソッドを呼び出す方法とパフォーマンスについて 実践 テンプレート側で、コンポーネントのメソッドを呼び出していきます。まずは、以下のようにaddメソッドをコンポーネントで作成します。 import { Component } from '@angular/core&... 2022.07.04 Angular
Angular [Angular] デフォルトのテストコードで基本を覚える 概要 ng new で作ったときに、デフォルトで入っているテストのコード「app.component.spec.ts」を解読しながら、テストの基礎的な書き方を覚えていきます。 デフォルトプロジェクトのテストコード ソース... 2022.07.03 Angular
Angular [Angular] MatSnackBarのテストをする 実践 テスト対象ソース 以下の単純なスナックバーを表示しているコンポーネントに対してテストする。 スナックバーをMatSnackBarで表示 テストソース テストケースはit関数内で、スナックバーのメッセー... 2022.07.03 Angular
Angular [Angular] スナックバーをMatSnackBarで表示 実践 app.component.ts MatSnackBarのopen関数で、スナックを表示させることができます。引数にdurationを設定すると、表示する時間を設定できます。 import { Component ... 2022.07.03 Angular
Angular [Angular] ダイアログをMatDialogを使って表示する 作るもの ボタンクリックにより、ダイアログを表示させるコンポーネントを作成ダイアログコンポーネントにパラメータを送るダイアログコンポーネントから、パラメータを受け取る 実践 ダイアログを呼び出す側のソース MadD... 2022.07.03 Angular
Angular AngularをVSCodeでデバッグする方法 デバッグ設定 Angularのプロジェクトフォルダ直下にある.vscodeフォルダ内の、launch.jsonにデバッグ時の設定があります。基本的にデフォルトの設定で問題ないです。ポート番号やブラウザなどを変えたければ変えればいい感... 2022.06.25 AngularVisual Studio Code
Angular mat-tableのフィルターをfilterPredicateを使って行う[Angular] filterPredicateとは mat-tableにあるデフォルトのフィルタリング動作が設定されているので、ここにオーバーライドすることで上書きできるメソッド。フィルタの処理をカスタマイズしたい場合は、ここの処理の戻り値を、抽出... 2022.06.25 Angular
Angular Angular Materialのテーブルをmat-tableで作ってみる 作ったテーブル ソースコード app.module.ts ここでは、MatTableModuleをインポートする。 import { NgModule } from '@angular/core&#... 2022.06.25 Angular