1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Angular Material を入れた時のメモ

Last updated at Posted at 2017-07-01

Angular Material のサイトを参照して入れた時のメモ

##Step 1: Install Angular Material
npm install --save @angular/material

##Step 2: Animations
npm install --save @angular/animations

##Step 3: Include a theme
Available pre-built themes:

テーマの種類(4種類)
-deeppurple-amber.css
-indigo-pink.css
-pink-bluegrey.css
-purple-green.css

your styles.css file:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
タイプによって変える。
※index.htmlに入れるタイプの紹介もされているがエラーが解消せず。

##Step 5: Gesture Support
npm install --save hammerjs

your app's root module.
import 'hammerjs';

##Step 6 Add Material Icons
your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

あとはComponent Library
を参照してパーツごとに入れる
モジュールあたりも追加するのでチェックを忘れずに。
webstorm使うと@NgModuleでMaterialModuleでImportsすると取り消し線がつくが入れないとうまく動かないので注意してください。

Step5と6は使うパーツによって入れたりだが、まあまあ使う印象だから入れておいて良いかも(6は必須で良いかも)。

以上

1
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
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?