Angular
だいぶ昔の記事で Angular CDK の Overlay モジュールの使い方を解説しました 1 2 3 。 今回は標準機能では実装できない簡易ポップアップを表示する Directive を実装してみるメモです。 Angular CDK を使用して全画面ローディングを表示する↩ Angular CDK O…
Angular の *ngFor は配列をループして表示するために使用されるディレクティブです。 *ngFor ディレクティブには trackBy というオブジェクト追跡用のプロパティがあり、これを使用すると配列内のオブジェクトの位置変更を追跡することができます。この tra…
Angular CDK Overlay の4本目の記事です。前回は Backdrop を使用する方法についてでした。 noxi515.hateblo.jp 今回は Angular CDK Overlay で表示される Component に対して引数のデータを渡し、また表示された結果を呼び出し元で受け取る方法です。ざっく…
Angular CDK Overlay の3本目の記事です。前回は画面に対する相対位置で表示する方法についてでした。 noxi515.hateblo.jp 今回は Angular CDK Overlay の backdrop についてです。 backdrop はその名の通り、オーバーレイ表示時にオーバーレイ要素の下に全…
Angular CDK Overlay の2本目の記事です。前回は画面に対する絶対位置で表示する方法についてでした。 noxi515.hateblo.jp 今回は特定の要素に対して相対位置でオーバーレイを表示する方法です。
久しぶりにブログ書いています。どうにも仕事が忙しいと書く気力が出ません。 今回は Angular CDK Overlay を使用してサクッとオーバーレイを表示してみます。オーバーレイは画面の任意の場所に Component を表示することができます。 Angular Material だと…
Angular9 の変更点の1つとして entryComponentsの非推奨 があります。 詳しい理由は以下の記事に記述されていますが、 Ivy を有効にしていると entryComponents に追加した Component で無くても CompnentFactorey を利用できるようになったからです。 dev.t…
Angular CLI で作成したライブラリープロジェクトに別の EntryPoint を追加する方法です。 前回は Component Harness を使用したテストを書いてみましたが、 Component Harness はライブラリーとして配布することでより効果を得ることができます。しかし同じ…
Angular の高パフォーマンスな Component を実装する上で重要なのは ChangeDetection: ChangeDetectionStrategy.OnPush に設定して不要な変更チェックを走らせないようにすることが上げられます。しかしこれを設定すると Component のテストを書く時に変更さ…
前回は Angular CDK Component Harness を試しに使ってみました。今回は自作のコンポーネントに対して Component Harness を実装してみます。
遂に Angular 9 がリリースされました。リリーススケジュールが4月・10月くらいが目処だったことを考えると大分難産でしたね（筆者の感想です）。 ところで Angular CDK にテスト用の機能として Component Harness が追加されました。使い方やテストへの導入…
最近 Angular の HTML テンプレートまわりで [xxx]="{}" を書いていてハマったのでメモしておきます。
この記事は Angular #2 Advent Calendar 2019 の12日目の記事です。11日目は @kawakami-kazuyoshi さんの Predictive Prefetching、PrefetchとGuess.js、時々、Angular でした。 この記事は普段利用している Angular がどのように View を表示・更新している…
Azure Pipelines にはまだプレビューではありますが、 Pipeline caching というキャッシュ機能があります。 Angular 8 時代の Ivy を使用すると Angular Material を組み込んだアプリのビルドが爆遅になったことがあるので、この機能を使用して Angular のビ…
AngularのHTTPインターセプターと非同期ロック処理を組み合わせると、とても無駄な感じもしますが、AJAXリクエストの同時リクエスト数を制限することができます。ブラウザが同時に6本までしか送らないのでぶっちゃけ無駄な気もしますが、有用なこともあるで…
Angular Materialはバージョン8で @angular/material からのインポートを非推奨にしました。またバージョン9からは @angular/material でのエクスポートがされなくなります。 github.com Importing directly from the root @angular/material entry-point is…
AngularのHttpClientを使用するサービスのテスト方法メモです。サービスからHttpClientを使用してAPIコールをしつつ、接続先のベースURLはHttpInterceptorから設定している状況を想定しています。
Angular MaterialはAngular公式のマテリアルデザインコンポーネントライブラリです。このライブラリのテーマカスタマイズ方法は公式ドキュメントにも記載がされています。 material.angular.io ドキュメントにはマテリアルデザイン標準？のテーマパレットを…
先日 Angular と JSZip の相性問題を倒したと思ったら次は Wijmo の Excel エクスポートが死ぬ問題に当たりました。
Angularでは @ContentChild や @ContentChildren を使用して <ng-content> の中で入れ子にした子要素を取得することができます。また <ng-content> もセレクターを使用して個別の子要素を取得できます。しかしこれには制約があり、 自分の子要素として直接設置された要素 のみが対象</ng-content></ng-content>…
JavaScript で ZIP ファイルを動的に生成できる JSZip というライブラリがあります。とても便利なのですが Angular CLI プロジェクトで使用するとコンパイルエラーになるので、その解消方法のメモです。
Angularを使用するときにデザインとして何を組み込むかは重要な要素です。私は主に Angular Material を使用してマテリアルデザインな Web アプリを開発しますが、 Wijmo の入力コントロールをそのまま組み込もうとすると機能面、デザイン面共に不都合が発生…
Angular の Guard といえば、ページ遷移前に認証情報を取得したり、ページを表示出来るかの権限チェックをしたり、、、ページを表示する前の前処理を色々行う機能です。 Angular 6 までは、 Guard はページを表示できるできないの boolean の値を返すことし…
Angularで入力バリデーションを実装する際、ReactiveFormではFormControlに対して様々なバリデーションを設定できますが、テンプレート駆動型だと設定することはできません。またReactiveFormもバリデーションを設定できるとは言え、事細かに全てをコードで…
Angular のコンポーネントに対して外のコンポーネントから表示する要素を指定したい場合、 ng-content を使用すると自身の子要素として指定された要素を展開することができます。子要素を展開したい箇所が1つだけであれば ng-content を使用すれば十分ですが…
Angular Material をインストールすると必須の依存に含まれている Angular CDK (Component Dev Kit) 。 CDK に実装されている Overlay と Portal 、そして Angular Material の Progress spinner を使用して全画面ローディングを作ってみます。
Angularを使用してSPAを開発すると、ページの再ローディング無しで画面遷移を行うことができます。ルーティングイベントを使用して、Angular内での画面遷移に応じて何か処理を差し込む方法を紹介します。
Angular Materialには MatFormField というマテリアルデザインの入力コントロール表示を支援するコンポーネントがあります。こんな見た目のヤツです。 Angular Material標準では テキスト入力（1行） テキスト入力（複数行） ドロップダウン の3つがサポート…
久しぶりの投稿です。 WijmoというHTML5アプリケーション用の入力やグリッドなどの機能を持つ有料ライブラリがあり、筆者が所属している部門で使用しているのですが、このライブラリの新しいバージョンが気付いたらリリースされていたので紹介します。 元の…
Angular 6でオブジェクトをProvideしていたら、その中のプロパティの一つがAngular CLIのProdなビルドを通すと null になってしまったので、防備録を兼ねてメモとして残します。 TL;DR Provideしたオブジェクトをexportすれば影響を避けられる。
