プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

Angular7アップデート内容まとめ【ドラッグ&ドロップ実装】

最終更新日:2019/03/07

Angular6でドラッグ&ドロップの実装をしていた僕は、Angular7のリリースをずっと待っていました。

そして、ついに!なんと華金にAngularは7へと進化した。

Angular7でできるようになった事。

  • 無限スクロール
  • ドラッグ&ドロップ
  • ng newなどの際のオプション選択
element</ my-custom-element>

でelementが反映されるように。

Angular6から7へupgradeする方法

ng update @angular/cli @angular/core

ワンコマンドでとても早く、10分以下の事が多いらしいです。
公式update手順
Angular Update Guide

Angular7でドラッグ&ドロップを実装(7分)

まずは、グローバルのAngularCLIをアップデートして、新規アプリケーションを作ります。

npm uninstall -g angular-cli
npm install -g @angular/[email protected]
ng new project-d

早速7の新機能、話仕掛けてくるCLIが出てきましたね^^

これでもう –scssなどとはおさらばです!

折角アプリケーションができたので、バージョンの確認をしていきましょう。

ng v

しっかりと、7!のプロジェクトが作成されています。

起動

cd project-d
ng serve

Angular Material & CDK & Animationのインストール

npm install --save @angular/material @angular/cdk @angular/animations

ng addだけでは動かず、事前にパッケージをインストールしておく必要があるようです。

app.moduleでドラッグ&ドロップ機能をインポート

import { DragDropModule } from '@angular/cdk/drag-drop';
imports: [
BrowserModule,
AppRoutingModule,
DragDropModule
],

app.component.htmlに移動

魔法の文字列cdkDragをimgに挿入

Aの画像が踊りだしました^^

AngularMaterialのCDK周りが強化されて嬉しいです!

結局Angularのドラッグ&ドロップ機能でパズルアプリを作ったので是非みてみてください。
このアプリ…..攻略方法があってそれがわからないと、めちゃめちゃクリアするのが難しいです。
https://animal-project-39018.firebaseapp.com/

参考、オススメ

Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

Angular CDK drag-and-drop の紹介
Drag and Drop

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中 としても活躍しているので常に酒臭い/しかも190cmの巨人でもある。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP