Angular CDKのPortalを使ったローディングラッパーの実装 - 余白
今回はAngular CDK(Component Dev Kit)の Portal 機能を使って、ローディングラッパーコンポーネントを実装する例の紹介です。 Angularの基本的な書き方はわかっている前提の内容になります。 ローディングラッパーとは次のようなテンプレートで、ローディング中はローディング表示を、ローディングが終わったら子要素を表示するようなコンポーネントを指しています。 たとえばこのようなテンプレートです。 <mat-card> <loading-wrapper [loading]="isLoading$ | async"> <div>Done!</div> </loading-wrapper> </mat-card> このように、ローディング状態によってビューが差し替わります。 CdkPortalの使い方 @angular/cdk/portalからインポートできるPort
Angularで巨大なライブラリを動的に読み込む - 余白
オリジナルはこちら medium.com 基本的にコードサンプルなどはオリジナルを参照してください。この記事では込み入った事情の部分だけを日本語で補足します。 tsconfig.jsonの準備 tsconfig.jsonの module 設定は、TypeScript内で記述したモジュールのimport/exportをどのように解決するかを指定します。 Angular CLIのデフォルトでは module: es2015 を指定しているので、静的な import ... from はそのまま残しますが、import() はサポートしていません。 tsconfig.jsonで module: esnext を指定すると、import() をJavaScriptにそのまま残すようになります。 import() がサポートされたブラウザ上であれば、webpackを通さなくてもそのままブラウザ上でモ
README.mdに動的コンテンツを埋め込む、あるいはImage via Functionというアプローチ - 余白
突然ですが、 README.md に動的なコンテンツを埋め込みたいと思ったことはないですか？僕はあります。 具体的には、リポジトリのコントリビューターをREADME.mdに埋め込みたいという願望がありました。 つまりこういうことです。 しかし毎回CIなどでREADME.mdを編集するのはセットアップが面倒です。 <contributors-list> みたいなCustom Elementsが使えたらきれいな世界だなあと思ったのですが、肝心のscriptタグが動かないのでそれは無理です。 ということで、頼れるのは 画像 ということになりました。 Image via Function README.mdに埋め込めて、なおかつ動的なコンテンツを扱えるのは画像のURL展開だけなので、つまりコントリビューターリストを画像化するHTTPエンドポイントを用意し、そのURLをREADME.mdに埋め込めば
Angular CDK drag-and-drop の紹介 - 余白
こんにちは。 この記事ではAngular CDKの次期アップデートで提供される、 drag-and-drop 機能を紹介します。 執筆時点ではまだnpmパッケージとして公開されていないので、一般に利用できるまでにはもうしばらくかかりますが、 もし早く使いたい方は、次のコマンドで開発版ビルドをインストールしましょう。 なお、開発版ビルドですので自己責任でお願いします。 $ yarn add angular/cdk-builds CDK drag-and-drop drag-and-dropはその名のとおり、UI上でのドラッグアンドドロップ操作をサポートするものです。 @angular/cdk/drag-drop パッケージから提供される DragDropModule をインポートすると、次の2つのディレクティブ、コンポーネントが利用できます。 cdkDrag ディレクティブ cdkDragデ
Angular v6.1で導入されるRouter Scrollerの紹介 - 余白
こんにちは、lacoです。 Angularの次のマイナーアップデートで、久しぶりに新機能らしい新機能が増えます。 その名もRouter Scrollerです。 長くAngularを使っている人には涙が出るほど嬉しい待望の機能です。 この記事ではRouter Scrollerの紹介と、来週のbeta.1まで待てない！今すぐ試してみたい！という奇特な方のために、最新のビルドで試す方法も紹介します。 Router Scroller Router Scrollerは、Angular Routerにスクロールに関連する機能を与えるものです。 Router Scrollerを使うと、次のようなことができます。 ブラウザバックしたときに遷移前のスクロール位置に復元する #foo のようなフラグメント付きのURLで、対応するIDを持つ要素まで自動でスクロールする どちらも、静的なHTMLページであればブラ
持続可能なAngularアプリケーション開発のために大事なこと - 余白
Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開発において、いかにメンテナンス性を維持して、持続可能なプロジェクトを構成するかについての個人的な見解をまとめる。 フレームワークを邪魔しない Angularアプリケーションのメンテナンスにおいて、いちばん重要なことはいかにAngularのアップデートを阻害しないかという点に尽きる。 これはAngularに限った話ではなくフレームワークと呼ばれるものを使うなら常に必要なことであるし、 アップデートが定期的に降ってくることが決まっているAngularであればなおさらである。 アプリケーションの一番根幹となる部分の鮮度が落ちれば、その他の部分はそれに
Angular 頻出実装パターン その1 - 余白
僕がAngularアプリケーションを書くときに頻出する実装パターンを紹介する記事です。続くかどうかは未定です。 onDestroy$ ngOnDestroyメソッドが呼び出されたタイミングでemitされるEventEmitterを作っておき、RxJSのtakeUntilパイプなどで使う実装パターン。 ngOnDestroyメソッド内でunsubscribeメソッドを呼び出すよりも宣言的で意味が取りやすいし、忘れにくい。 実装例はこんな感じ。ReactiveFormsModuleを使うときにvalueChangesに引っ掛けることが多い。 import { Component, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; import { FormGroup, FormControl } from '@ang
Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) - 余白
Angularフレームワークのv6.0.0リリースにあわせ、Angular CLIもv1.7系からv6.0へメジャーアップデートをおこなう予定です。 この記事ではAngular CLI v1.7系で作成した開発環境からv6.0系の開発環境へマイグレーションする方法を解説します。 この記事は安定版リリース前のRCバージョンを使用しています。 前提 次のような開発環境を想定しています。 グローバルにAngular CLI v1.7系がインストールされている状態 ng new が可能な状態 Angular CLI v1.7系に依存した状態のプロジェクトが存在する状態 package.jsonの@angular/cli がv1.7系、かつ .angular-cli.json ファイルが存在する状態 移行ステップ 1. プロジェクトローカルのAngular CLIのバージョンを更新する グローバルで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
