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

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

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

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

Angular7の主な追加機能

主に2つです。

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

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

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

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

バーチャルスクロール

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

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

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

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

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

サンプル

ドラッグアンドドロップ

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

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

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

サンプルソースです。

サンプル

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA