|
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