Angular6からAngular7にバージョンアップする方法

Angular6からAngular7にバージョンアップする方法

Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。

Angular6からAngular7にバージョンアップするには、以下のコマンドで一発です。（10分くらいかかります）

ng update @angular/cli @angular/core

Angular7の主な追加機能

主に2つです。

• バーチャルスクロール
• ドラッグアンドドロップ

バーチャルスクロールという機能が追加されています。

スクロールする際にDOMを動的に変えることで、DOMの肥大を防ぐことができるという素晴らしい機能です。

ドラッグアンドドロップも簡単に実装できるようになりました。

バーチャルスクロール

ScrollingModuleをインポートする必要があります。うまくいかない場合は以下を実行します。

npm install --save @angular/cdk@7.0.0-beta.0

これでScrollingModuleをインポートできると思います。

app.moduleにScrollingModuleを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

開発者ツールで見てみると、DOMの様子がすごくよくわかります。

サンプル

ドラッグアンドドロップ

DragDropModuleをインポートする必要があります。

app.module.tsにDragDropModuleを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DragDropModule} from '@angular/cdk/drag-drop';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  DragDropModule // 追加
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

あとはドラッグアンドドロップしたいタグにcdkDragディレクティブを付けるだけです。

サンプルソースです。

<div class="example-box" cdkDrag><!-- cdkDragをつける -->
私を好きにドラッグして
</div>

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^