はじめに

この記事はフラー Advent Calendar 2019 の 18 日目の記事です。

いつかまとめようと思っていた、Angular CDKのことについて書きます。

CDK は Component Dev Kit の略で、webでよくあるUI(モーダル等)の実装をサポートしてくれるツールセットです。

今回は特にAngular CDKの花形だと勝手に思っている、 Portal と Overlay について、個人の備忘も含めてまとめようと思います。

Portal

Portal を使うとコンポーネントやテンプレートを動的に描画することができます。

コンポーネントやテンプレートから Portal を作成し、それを PortalOutletに接続するとブラウザに描画されるようになります。

• Portal : 描画するなにか
• PortalOutlet : 描画する場所

みたいなイメージです。

下の例では、 PortalOutlet に接続する Portal を変更することで、描画するコンテンツを変更しています。

<h2>Component Portal</h2>
<ng-template [cdkPortalOutlet]="selectedComponentPortal"></ng-template>
<button (click)="selectedComponentPortal = exampleComponentPortal1">PortalExample1を接続</button>
<button (click)="selectedComponentPortal = exampleComponentPortal2">PortalExample2を接続</button>

@Component({
  selector: 'app-portal',
  templateUrl: './portal.component.html',
  styleUrls: ['./portal.component.scss']
})
export class PortalComponent implements AfterViewInit {
  exampleComponentPortal1: ComponentPortal<PortalExampleComponent>;
  exampleComponentPortal2: ComponentPortal<PortalExample2Component>;
  selectedComponentPortal: ComponentPortal<PortalExampleComponent|PortalExample2Component>;

  ngAfterViewInit(): void {
    this.exampleComponentPortal1 = new ComponentPortal(PortalExampleComponent);
    this.exampleComponentPortal2 = new ComponentPortal(PortalExample2Component);
  }
}

Portalの作成

Portal は Component または Template から作成することができます。