Angular7におけるAngular Materialのインストール並びにドラッグ&ドロップ機能の実現



ビデオ解説(日本語）
https://youtu.be/i8roYTAAj-U

ビデオ解説(英語）
https://youtu.be/v_eZsVtnicA


--------------------

## 必要環境

Angular7がシステムにインストールされている必要がありますので、まだインストールされていない方は、予めインストールしておいてください。


--------------------

## プロジェクトの生成

まず適当な名前で新しいプロジェクトを生成します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_01.png" width= "640" >



`ng new ng7Material01`と入力します。

`ng7Material01`はプロジェクト名であり、その名称は任意です。

--------------------

まず、ルーティング機能を追加するか否かの問い合わせがあります。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_02.png" width= "640" >


ここでは、`y`としておきます。

次に、スタイルシート・フォーマットの選択がありますので、ここでは`SCSS`を選んでおきます。

するとプロジェクトの生成が開始されます。

このプロセスには若干時間を要します。

--------------------

プロジェクトが生成されましたら、そのプロジェクト・ディレクトリに移動します。


そして、`code .`と入力して、Visual Studio Codeを起動します。

--------------------

## Angular Materialのインストール

VS Codeが起動しましたら、`Control + @` キーで、ターミナル・ウィンドウを開きます。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_03.png" width= "640" >



そして`ng add @angular/material`と入力して、Angular Materialをインストールします。

--------------------



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_04.png" width= "640" >


するとカラーの組み合わせのテーマに関する問い合わせがありますので、ここでは標準的な`indigo-pink`を選択します。

次に、HammerJSをセットするか否かの問い合わせがありますので、`y`を入力します。

最後にアニメーションを利用するか否かの問い合わせがありますので、`y`を入力します。

すると、`Package.json`ファイルなどの再編集が行われ、インストールが完了します。

--------------------

## Angular Materialの新機能の確認(ドラッグ&ドロップ）


ここでは、Angular Materialの新機能を試してみたいと思います。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_05.png" width= "640" >



まず、ブラウザでAngular Material Schematics <https://material.angular.io/guide/schematics>のページを開きます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_06.png" width= "640" >

そして_Drag and Drop schematic_セクションを表示し、そのコマンド行

`ng generate @angular/cdk:drag-drop <component-name>`

をコピーします。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_07.png" width= "640" >


VS Codeに戻り、コマンドラインに貼り付けます。

コンポーネント名は自分で適当に設定します。

ここでは`mydragdrop`というコンポーネント名にしました。

この生成はすぐ終わります。

--------------------

ソースを確認すると、新たに`mydragdrop`ディレクトリが生成されているのがわかります。


--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_09.png" width= "640" >


次にこのディレクトリの中の、`mydragdrop.component.ts`ファイルを開いて、セレクター名をコピーします。

ここでは、_app-mydragdrop_となっています。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_10.png" width= "640" >



つぎに、`app.component.html`ファイルを開き、最下行にタグとしてペーストします。

さらにデフォルトのＨＴＭＬ文をすべてコメント・アウトします。

このファイルを保存します。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_11.png" width= "640" >




次に、ターミナル・ウィンドウで、`ng s -o`と入力して、ローカルサーバを起動し、ブラウザを開きます。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_install_12.png" width= "640" >



２列のリストが表示されますので、各項目をドラッグ&ドロップしてみます。


--------------------

VS Codeに戻り、`Control+c`と`y + Return`でローカル・サーバを停止させます。

--------------------

Angular7におけるAngular Materialの稼働を確認できました。

--------------------


　  

## Reference

- "Schematics", 
<https://material.angular.io/guide/schematics>

- "Angular Update Guide", 
<https://update.angular.io/>

- "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more", 
<https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c>


- "Angular5,Angular6,Angular7 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>

- "Angular5,Angular6,Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>