Anguar Material CDK の Virtual Scrolling を触ってみた

#はじめに
この記事は Angular Advent Calendar 2018 16日目の記事です。

Angular7がリリースされ、CDK に DragDropModule や ScrollingModule が追加されました。これらをインポートすると Drag and Drop や Virtual Scrolling が利用できます。
触ってみたかったのでサンプルに沿って少し触ってみました。

Drag and Drop に関しては [Angular Advent Calendar 2018 8日目の記事] (https://qiita.com/swfz/items/ac8daecad48d6dc948c0) で @swfz さんが書かれています！
本記事では　Virtual Scrolling を触ってみた件について書きます。

認識違い等ありましたらご指摘いただけるとありがたいです。

#まずv7にアップグレードする
ローカル環境がv６だったのでまずv7にあげました。

こちらを参照し該当する条件を選択

「Show me how to update!」クリック

表示された手順に沿ってアップグレードします。

ng update @angular/cli @angular/coreを実行したところ
Could not find a package.json. Are you in a Node project?と出たので、先に
ng new [任意のプロジェクト名]で新規プロジェクト作成後そのフォルダに移動して再度
ng update @angular/cli @angular/coreを実行しました。

バージョンを確認します。

v7になりました。

この方法だとプロジェクト単位のアップグレードになるので開発環境がまるっとv7になってOKであればnpm install -g @angular/cliを実行すればOKです。

上記手順を踏んだ後、npm install -g @angular/cliも試してみた所、先ほどのプロジェクト配下以外でもv7になったことが確認できました。この後はv7でプロジェクトを作成して進めていきます。

#新しくプロジェクトを作成
ng new virtual-scrolling-sample
で新規プロジェクトを作成します。
routingはなし、cssはscssを選択しました。

$ ng new virtual-scrolling-sample
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com  
 ]

ng serve -oで起動します。

起動できました。

#CDK を入れてみる
新規作成したプロジェクト配下で以下コマンドを実行します。（参考）
npm install --save @angular/cdk

#サンプルを参考に Virtual Scrolling を入れてみる

ではサンプルを見つつVirtual Scrallを使ってみたいと思います。
一番シンプルそうなサンプルを参照。
https://material.angular.io/cdk/scrolling/overview#creating-items-in-the-viewport

まず、src/app/app.module.tsでScrollingModule をインポートします。

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ScrollingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

次にsrc/app/app.component.tsを修正します。
サンプルのコードのように
items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);を追加してデータを用意します。

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
}

htmlとcssもサンプルからコピーします。

src/app/app.component.html

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
</cdk-virtual-scroll-viewport>

src/app/app.component.scss

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

動いた

簡単、サクサク。

#コンテキスト変数を使ってみる
*cdkVirtualForでは以下コンテキスト変数がサポートされています。（詳細はドキュメント参照。）

コンテキスト変数	説明
index	データソース内のアイテムのインデックス
count	データソース内のアイテムの合計数
first	データソースの最初の項目であるかどうか
last	データソースの最後の項目かどうか
even	indexが偶数であるかどうか
odd	indexが奇数であるかどうか

以下のようにlet even = even;,let odd = odd"のように書くことでテンプレートで使えるようになります。
奇数行、偶数行で表示する画像を変えるようにしてみました。

src/app/app.component.html

<cdk-virtual-scroll-viewport itemSize="150" class="example-viewport">
  <div
    *cdkVirtualFor="let item of items; 
                    let even = even; 
                    let odd = odd"
                    class="example-item">
    <p>{{ item }}</p>
    <ng-container *ngIf="even">
      <img src="../assets/img/me.jpg" />
    </ng-container>
    <ng-container *ngIf="odd">
      <img src="../assets/img/nise.jpg" />
    </ng-container>
  </div>
</cdk-virtual-scroll-viewport>

cssも少し調整。

src/app/app.component.scss

.example-viewport {
  height: 500px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 150px;
}

img {
  width: 100px;
}

奇数行、偶数行で画像が変わりました

まとめ

実は Angular Material を触ったことがなかったのでこれを機に触れて良かったです。
試してみるのはとっても簡単でした！他の機能も触って見ようと思います。

明日のAngular Advent Calendar 2018 担当は @ynishimura0922 さんです！