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/ ) .
2
2
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.
16
4
17
- ## Install Angular Material components
5
+ ## Step 1: Install Angular Material
18
6
19
7
``` bash
20
8
npm install --save @angular/material
21
9
```
22
10
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.
24
14
25
- ** src/app/app.module.ts**
26
15
``` ts
27
16
import { MaterialModule } from ' @angular/material' ;
28
- // other imports
17
+
29
18
@NgModule ({
19
+ ...
30
20
imports : [MaterialModule ],
31
21
...
32
22
})
33
23
export class PizzaPartyAppModule { }
34
24
```
35
25
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.
39
29
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
41
41
42
- ### Additional setup for gestures
43
42
Some components (` md-slide-toggle ` , ` md-slider ` , ` mdTooltip ` ) rely on
44
43
[ HammerJS] ( http://hammerjs.github.io/ ) for gestures. In order to get the full feature-set of these
45
44
components, 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
48
47
(such as the [ Google CDN] ( https://developers.google.com/speed/libraries/#hammerjs ) ), or served
49
48
directly from your app.
50
49
51
- #### If you want to include HammerJS from npm, you can install it:
52
-
50
+ To install via npm, use the following command:
53
51
``` bash
54
- npm install --save hammerjs
52
+ npm install --save hammerjs
55
53
```
56
54
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.
59
56
``` ts
60
57
import ' hammerjs' ;
61
58
```
62
59
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
+
63
73
## Configuring SystemJS
74
+
64
75
If your project is using SystemJS for module loading, you will need to add ` @angular/material `
65
76
to the SystemJS configuration:
66
77
67
78
``` js
68
79
System .config ({
69
80
// existing configuration options
70
81
map: {
71
- ... ,
72
- ' @angular/material' : ' npm:@angular/material/bundles/material.umd.js'
82
+ ...
83
+ ' @angular/material' : ' npm:@angular/material/bundles/material.umd.js' ,
84
+ ...
73
85
}
74
86
});
75
87
```
76
88
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
- ```
87
89
88
90
## Sample Angular Material projects
89
91
- [ Material Sample App] ( https://github.com/jelbourn/material2-app )
0 commit comments