今回は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 CDKのPortalを使ったローディングラッパーの実装 - 余白](https://cdn-ak-scissors.b.st-hatena.com/image/square/06a15c64ba0ceec233d86d71001ebb29a9dcbf5d/height=288;version=1;width=512/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Ftheme%2Fog-image-1500.png)