Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

最終目標

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

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

その1(この記事)でできるもの

「いでよトースト」ボタンを押すと、画面中央下部にトーストっぽいものが2秒間表示されます。
スクリーンショット 2019-06-10 18.36.32.png

準備

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);
    ...

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

次回

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away