Angular7.0 リリース
10月19日、Angularのv7.0がリリースされました！
待ってました！
今回も変更点をいくつかご紹介しようと思います。
追加対応
以前のリリース記事でも書きましたが、TypeScript3.1が対応になりました。
こちらは以前の記事を参考にしてください→TypeScript3.1 リリース
また、RxJS 6.3も対応になりました。こちらも最新バージョンですね。
CLIプロンプト
ngコマンドの一部にプロンプトが表示されるようになりました。
たとえばng newでプロジェクトを始める際に「ルーティングを使用するかどうか」と「stylesheetのフォーマット」の選択を求められます。
angular materialの追加においても、カラーテーマの設定やcdkとhammerJSの設定を手動でやらなくて済むようになりました。
これは非常にわかりやすくていいですね。
Angular Materialの変更点
@angular/materialのスタイルが微妙に変わっています。
MatCardの角が丸くなったり、文字サイズが変わったり。。。
CDKに面白そうなModuleも増えているのでそちらを少し使ってみました。
Virtual Scrolling
Virtual Scrollingは、スクロールウィンドウの部分で表示する要素だけを自動でロードしてくれるので、長いデータリストをスクロールする際に便利なModuleです。
どういう動きをするか基本的な使い方をみてみましょう。
まずはScrollDispatchModuleをimportします。
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
VirtualScrollはcdk-virtual-scroll-viewportセレクタを使用します。
必須パラメータとして、itemSizeでスクロール内容の要素のサイズを指定してやる必要があります。
content部分にはcdkVirtualForディレクティブでループさせる配列を指定します。
ngForディレクティブと書き方が似ていて、同じようにindexやfirst, lastなども指定できるのでわかりやすいです。
またcdk-virtual-scroll-viewportセレクタには高さ0がデフォルトなので、style.heightを設定しておきましょう。
以下はサンプルです。
export class VirtualScrollComponent {
public users: string[] = Array.from({length: 10000}).map((_, i) => `User No.${('00000000' + i).slice(-8)}`);
public itemSize: number = 30;
}
<cdk-virtual-scroll-viewport [itemSize]="itemSize" [ngStyle]="{'height.px': 200}">
<div *cdkVirtualFor="let user of users" [ngStyle]="{'height.px': itemSize}">{{user}}</div>
</cdk-virtual-scroll-viewport>
Drag and Drop
Drag and Dropは、要素を自由にドラッグ&ドロップできます。
最近ダッシュボードなどで見かける、カードの表示順を自由に変えたりできるあれですね。
早速こちらもModuleをimportして使ってみましょう。
import { DragDropModule } from '@angular/cdk/drag-drop';
例として、リストの並び順をドラッグ&ドロップして変える動きをさせたい場合は、
リストの親要素にcdkDropList、子要素にcdkDragディレクティブを設定します。
そして親要素でドロップ時に発火するcdkDropListDroppedイベントを受け取り、並び順を変更する処理を書けば完成です。
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
// 省略
styles: [`
.color-item {
color: white;
height: 50px;
line-height: 50px;
text-align: center;
cursor: move;
}
`]
})
export class DragAndDropComponent {
public colors: string[] = [
'red',
'orange',
'yellow',
'green',
'aqua',
'blue',
'purple'
];
public drop(event: CdkDragDrop<string[]>): void {
moveItemInArray(this.colors, event.previousIndex, event.currentIndex);
}
}
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div class="color-item" [ngStyle]="{'background-color': color}" *ngFor="let color of colors" cdkDrag>{{color}}</div>
</div>
ちなみに上記のcdkDropListDroppedイベント発火時のdropメソッドで使用しているmoveItemInArrayメソッドを実行すると、colorsの配列自体の並び順が変更されます。
上書きされて困る場合などは別プロパティで保管しておく必要がありそうですね。
DoBootstrap
新しいLifeCycleが追加されました。
と言っても、これはAppModuleでのみ使えるLifeCycleです。
これまでAppModuleのアノテーションには、デフォルトで最初に読み込むComponent(bootstrap)でAppComponentが指定してありました。
// app.module.tsの初期状態
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] // ←ここに初期読み込みのComponentが設定されている
})
export class AppModule { }
これがあることでindex.htmlで指定したComponentのselectorが読み込めるわけです。
もちろんv7.0でもこれまで通り使用できますが、要はこれをLifeCycleで設定してフックできるようになったと。
あまり使う方はいないかもしれませんが。。。
DoBootstrapを使用する場合は一般的に以下の形でできます。
// 公式引用
export class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef): void {
appRef.bootstrap(AppComponent); // Or some other component
}
}
最後に
今回はv6のリリース時よりも大きく変わったところはなかったですね。
AngularMaterialの使い勝手が非常によくなったようには思うので、積極的に使用していこうと思います。
以前のシリーズ物「Angular最速マスターへの道」のDEMOとして使用していたGitHub Pageがありますが、
そちらも7.0にバージョンアップして、今回のVirtualScrollingとDrag and Dropを使って遊んでみました！
もしよければ下記から見てみて下さい！
→ afm – Release 7.0
参考
