1- Get started with Angular Material using the Angular CLI.
1+ For help getting started with a new Angular app, check out the [ Angular CLI] ( https://cli.angular.io/ ) .
22
3- ## Install Angular CLI
4-
5- ``` bash
6- npm install -g @angular/cli
7- ```
8-
9- ## Create a new project
10-
11- ``` bash
12- ng new my-project
13- ```
14-
15- The new command creates a project with a build system for your Angular app.
3+ For existing apps, follow these steps to begin using Angular Material.
164
17- ## Install Angular Material components
5+ ## Step 1: Install Angular Material
186
197``` bash
208npm install --save @angular/material
219```
2210
23- ## Import the Angular Material NgModule
11+ ## Step 2: Import the Module
12+
13+ Add MaterialModule as an import in your app's root NgModule.
2414
25- ** src/app/app.module.ts**
2615``` ts
2716import { MaterialModule } from ' @angular/material' ;
28- // other imports
17+
2918@NgModule ({
19+ ...
3020 imports : [MaterialModule ],
3121 ...
3222})
3323export class PizzaPartyAppModule { }
3424```
3525
36- ## Include the core and theme styles:
37- This is ** required ** to apply all of the core and theme styles to your application. You can either
38- use a pre-built theme, or define your own custom theme.
26+ ## Step 3: Include Theming
27+
28+ Including a theme is ** required ** to apply all of the core and theme styles to your application.
3929
40- :trident : See the [ theming guide] ( ./theming.md ) for instructions.
30+ To get started with a prebuilt theme, include the following in your app's index.html:
31+
32+ ``` html
33+ <link href =" node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel =" stylesheet" >
34+ ```
35+
36+ Note that your app's project structure may have a different relative location for your node_modules.
37+
38+ For more information on theming and instructions on how to create a custom theme, see the [ theming guide] ( ./theming.md ) .
39+
40+ ## Step 4: Gesture Support
4141
42- ### Additional setup for gestures
4342Some components (` md-slide-toggle ` , ` md-slider ` , ` mdTooltip ` ) rely on
4443[ HammerJS] ( http://hammerjs.github.io/ ) for gestures. In order to get the full feature-set of these
4544components, HammerJS must be loaded into the application.
@@ -48,42 +47,45 @@ You can add HammerJS to your application via [npm](https://www.npmjs.com/package
4847(such as the [ Google CDN] ( https://developers.google.com/speed/libraries/#hammerjs ) ), or served
4948directly from your app.
5049
51- #### If you want to include HammerJS from npm, you can install it:
52-
50+ To install via npm, use the following command:
5351``` bash
54- npm install --save hammerjs
52+ npm install --save hammerjs
5553```
5654
57- After installing, import HammerJS on your app's module.
58- ** src/app/app.module.ts**
55+ After installing, import it on your app's root module.
5956``` ts
6057import ' hammerjs' ;
6158```
6259
60+ ## Step 5 (Optional): Add Material Icons
61+
62+ If you want your ` md-icon ` components to use [ Material Icons] ( https://material.io/icons/ ) , load the font in your ` index.html ` .
63+
64+ ``` html
65+ <link href =" https://fonts.googleapis.com/icon?family=Material+Icons" rel =" stylesheet" >
66+ ```
67+
68+ For more information on using Material Icons, check out the [ Material Icons Guide] ( https://google.github.io/material-design-icons/ ) .
69+
70+ Note that ` md-icon ` has support for any font or svg icons, so using Material Icons is just one option.
71+
72+
6373## Configuring SystemJS
74+
6475If your project is using SystemJS for module loading, you will need to add ` @angular/material `
6576to the SystemJS configuration:
6677
6778``` js
6879System .config ({
6980 // existing configuration options
7081 map: {
71- ... ,
72- ' @angular/material' : ' npm:@angular/material/bundles/material.umd.js'
82+ ...
83+ ' @angular/material' : ' npm:@angular/material/bundles/material.umd.js' ,
84+ ...
7385 }
7486});
7587```
7688
77- ### [ Optional] Using Material Design icons with ` md-icon ` :
78-
79- - If you want to use Material Design icons in addition to Angular Material components,
80- load the Material Design font in your ` index.html ` .
81- ` md-icon ` supports any font icons or svg icons, so this is only one option for an icon source.
82-
83- ** src/index.html**
84- ``` html
85- <link href =" https://fonts.googleapis.com/icon?family=Material+Icons" rel =" stylesheet" >
86- ```
8789
8890## Sample Angular Material projects
8991- [ Material Sample App] ( https://github.com/jelbourn/material2-app )
0 commit comments