|
1 | 1 | # Include [Angular Material](https://material.angular.io)
|
2 | 2 |
|
3 |
| -[Angular Material](https://material.angular.io) is a set of Material Design components for Angular apps. |
4 |
| -This guide will walk you through adding material design to your Angular CLI project and configuring it to use Angular Material. |
5 |
| - |
6 |
| -Create a new project and navigate into the project... |
7 |
| -``` |
8 |
| -ng new my-app |
9 |
| -cd my-app |
10 |
| -``` |
11 |
| - |
12 |
| -Install the `@angular/material` library and add the dependency to package.json... |
13 |
| -```bash |
14 |
| -npm install --save @angular/material @angular/cdk |
15 |
| -``` |
16 |
| - |
17 |
| -Import the Angular Material NgModule into your app module... |
18 |
| -```javascript |
19 |
| -//in src/app/app.module.ts |
20 |
| - |
21 |
| -import { MaterialModule } from '@angular/material'; |
22 |
| -// other imports |
23 |
| - |
24 |
| -@NgModule({ |
25 |
| - imports: [ |
26 |
| - ... |
27 |
| - MaterialModule |
28 |
| - ], |
29 |
| - ... |
30 |
| -}) |
31 |
| -``` |
32 |
| - |
33 |
| -Now that the project is set up, it must be configured to include the CSS for a theme. Angular Material ships with some prebuilt theming, which is located in `node_modules/@angular/material/prebuilt-themes/`. |
34 |
| - |
35 |
| -To add an angular CSS theme and material icons to your app... |
36 |
| -```sass |
37 |
| -/* in src/styles.css */ |
38 |
| -
|
39 |
| -@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; |
40 |
| -@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; |
41 |
| -``` |
42 |
| - |
43 |
| -Run `ng serve` to run your application in development mode, and navigate to `http://localhost:4200`. |
44 |
| - |
45 |
| -To verify Angular Material has been set up correctly, change `src/app/app.component.html` to the following... |
46 |
| -```html |
47 |
| -<h1> |
48 |
| - {{title}} |
49 |
| -</h1> |
50 |
| - |
51 |
| -<button md-raised-button> |
52 |
| - Angular Material works! |
53 |
| - <md-icon>done</md-icon> |
54 |
| -</button> |
55 |
| -``` |
56 |
| - |
57 |
| -After saving this file, return to the browser to see the Angular Material styled button. |
58 |
| - |
59 |
| -### More Info |
| 3 | +[Angular Material](https://material.angular.io) is a set of Material Design components for Angular apps. To get started please visit these links to the Angular Material project: |
60 | 4 |
|
61 | 5 | - [Getting Started](https://material.angular.io/guide/getting-started)
|
62 | 6 | - [Theming Angular Material](https://material.angular.io/guide/theming)
|
|
0 commit comments