Angular CDK を使ってtoastをつくってみよう！その1 #Angular

最終目標

この記事ではAngular CDKのoverlayを使って、メッセージと表示時間を指定できるtoastを作ります（live example）
作り終わってから、これはsnack-barなのでは？と思ったのですが、名前を変えるのが面倒だったのでここではこういうのをtoastと呼ぶことにします。

cdk自体やcdkのoverlayについてはこちらの素晴らしい記事を読んでおくとよいでしょう
Angular Component Dev Kit 入門

その1（この記事）でできるもの

「いでよトースト」ボタンを押すと、画面中央下部にトーストっぽいものが2秒間表示されます。

準備

angular CLIでng newした後に、toast表示に必要なcdkやanimationを使う準備をします
ライブラリのインストール

npm i @angular/cdk

app.moduleにインポート

src/app/app.module.ts

import { OverlayModule} from '@angular/cdk/overlay';
import { PortalModule} from '@angular/cdk/portal';
// animationはこの記事ではまだ使いませんが、後々使います！
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...

@NgModule({
  imports:      [... , OverlayModule, PortalModule, BrowserAnimationsModule ],

overlay用のcssをインポート

src/styles.css

@import "~@angular/cdk/overlay-prebuilt.css";

toast component（overlayの中身）の作成

toastとして表示するcomponentをつくります。

ng generate component toast

app.moduleのentryComponentsに登録します。
toast componentはテンプレートから呼ばず、動的にロードするためentryComponentsへの登録が必要になります。

src/app/app.module.ts

@NgModule({
...
entryComponents: [ToastComponent]
})

overlayの表示

さっそくToastComponentを表示してみましょう

src/app/app.component.ts

import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

import { ToastComponent } from './toast/toast.component';

...

constructor(private overlay: Overlay){ }

  open() {
    const overlayRef = this.overlay.create();
    overlayRef.attach(new ComponentPortal(ToastComponent))
  }

src/app/app.component.html

<button (click)="open()">いでよトースト</button>

「いでよトースト」ボタンをクリックすると、左上に'tast works!'と出てきます。
でも、ボタンに被ってしまって見づらいですね。とりあえず背景と文字に色をつけましょう。

src/app/toast/toast.component.css

:host {
  background-color: black;
  color: white;
}

続いて位置が悪いので、最終目標と同じ画面下部の中央あたりに変更します。
overlay.create()関数の引数に、OverlayConfigクラスのインスタンスを渡すことで位置の指定ができます。
OverlayConfigは他にも設定できる項目がありますが、今は表示位置に関するpositionStrategyだけ設定します。

src/app/app.component.ts

import { Overlay, OverlayConfig } from '@angular/cdk/overlay';

...

open() {
  const config = new OverlayConfig({
    // 表示位置に関する設定
    positionStrategy: 
      // 画面全体に対して水平方向は中心・垂直方向は下から5%のところに
      this.overlay.position().global().centerHorizontally().bottom('5%'),
});
  const overlayRef = this.overlay.create(config);

...
}

「いでよトースト」をクリックするとトーストっぽいものが表示されました！

toastの非表示

このままでは表示されっぱなしなので、表示された2秒後にtoastが消えるようにしましょう。

src/app/app.component.ts

    ...
    overlayRef.attach(new ComponentPortal(ToastComponent));

    setTimeout(() => {
      overlayRef.detach();
    }, 2000);
    ...

これでトーストがパッと消えるようになります。

次回

とりあえずトーストっぽいものはできましたが、動きがありません。
次回は、画面下から出たり引っ込んだりするアニメーションを追加します！