Angular [Angular]タッチイベントを処理する
概要Angularでタッチイベントを処理するには、以下をディレクティブに設定することで対応できます。(touchstart)：タッチしたとき(touchmove)：タッチしたまま動かしているとき(touchend)：タッチを話したときサンプ...
Angular
Angular 
Angular devopsでApp ServiceにAngularアプリをデプロイする(リリースパイプライン編)
概要angularプロジェクトをazure devopsでビルドパイプラインした結果から、リリースパイプラインを動かして、App Serviceにデプロイします。前提条件ビルドパイプラインでビルドしていることdevopsでApp Servi...
Angular devopsでApp ServiceにAngularアプリをデプロイする(ビルドパイプライン編)
概要Azure DevopsのReposにあるAngularアプリを、Azure DevopsのPipeline機能を使って、App Serviceへデプロイしていきます。この記事では、ビルドパイプラインの処理をまとめていきます。ビルドパイ...
Angular mat-dialogをドラッグさせる[Angular Material]
mat-dialogをドラッグさせるAngular Materialのダイアログをドラッグさせるようにしていきます。以下を参考に、ダイアログのドラッグ機能を追加します。また、DragDropModuleを使うのでインポートする必要があります...
Angular mat-dialogのヘッダーを作るのに余計なスペースを削除する [Angular]
mat-dialogのヘッダーについて以下のように、Angular MaterialのDialogを使って、ヘッダーを作ろうとすると余白が入ってしまう。<h1 mat-dialog-title>ヘッダータイトル</h1><div mat-d...
Angular [Angular] テンプレート側でメソッドを呼び出す方法とパフォーマンスについて
実践テンプレート側で、コンポーネントのメソッドを呼び出していきます。まずは、以下のようにaddメソッドをコンポーネントで作成します。import { Component } from '@angular/core';@Com...
Angular [Angular] デフォルトのテストコードで基本を覚える
概要ng new で作ったときに、デフォルトで入っているテストのコード「app.component.spec.ts」を解読しながら、テストの基礎的な書き方を覚えていきます。デフォルトプロジェクトのテストコードソースコードを丸ごと持ってきたの...
Angular [Angular] MatSnackBarのテストをする
実践テスト対象ソース以下の単純なスナックバーを表示しているコンポーネントに対してテストする。 スナックバーをMatSnackBarで表示テストソーステストケースはit関数内で、スナックバーのメッセージが一致しているかでテストしています。im...
Angular [Angular] スナックバーをMatSnackBarで表示
実践app.component.tsMatSnackBarのopen関数で、スナックを表示させることができます。引数にdurationを設定すると、表示する時間を設定できます。import { Component } from '@...
Angular [Angular] ダイアログをMatDialogを使って表示する
作るものボタンクリックにより、ダイアログを表示させるコンポーネントを作成ダイアログコンポーネントにパラメータを送るダイアログコンポーネントから、パラメータを受け取る実践ダイアログを呼び出す側のソースMadDialogのopen関数で、ダイア...