現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 1129 view

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.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

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

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

PAGE TOP