LoginSignup
3
3

More than 5 years have passed since last update.

@SOhtsu(Shuichi Ohtsu)

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

Last updated at Posted at 2018-10-25

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

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

必要環境

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

プロジェクトの生成

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

ng new ng7Material01と入力します。

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

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

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

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

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

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

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

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

Angular Materialのインストール

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

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

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

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

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

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

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

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

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

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

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

をコピーします。

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

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

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

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

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

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

ここでは、app-mydragdropとなっています。

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

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

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

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

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

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

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

　

Reference

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3