Skip to content

Commit 6dd682d

Browse files
committed
chore(docs): add how-to's for angular material and angular material flex layout inclusion
applies to angular#2711
1 parent 00a21b2 commit 6dd682d

File tree

1 file changed

+63
-0
lines changed

1 file changed

+63
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Include [Angular Material](https://material.angular.io)
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
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.forRoot()
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/core/theming/prebuilt`.
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/core/theming/prebuilt/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
60+
61+
- [Getting Started](https://material.angular.io/guide/getting-started)
62+
- [Theming Angular Material](https://material.angular.io/guide/theming)
63+
- [Theming your own components](https://material.angular.io/guide/theming-your-components)

0 commit comments

Comments
 (0)