Skip to content

Commit 22ab909

Browse files
jeremymwellsjeremymwells
committed
chore(docs): add how-to's for angular material and angular material flex layout inclusion
applies to angular#2711
1 parent 338e69b commit 22ab909

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎docs/documentation/stories/include-angular-material.md

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
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 && cd my-app
9+
```
10+
11+
With the new project created and ready, you will next need to install Angular Material.
12+
13+
Install the `@angular/material` library and add the dependency to package.json...
14+
```bash
15+
npm install --save @angular/material
16+
```
17+
18+
Import the Angular Material NgModule into your app module...
19+
```javascript
20+
//in src/app/app.module.ts -->
21+
22+
import { MaterialModule } from '@angular/material';
23+
// other imports
24+
25+
@NgModule({
26+
imports: [
27+
...
28+
MaterialModule.forRoot()
29+
],
30+
...
31+
})
32+
```
33+
34+
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`.
35+
36+
To add an angular CSS theme and material icons to your app...
37+
```css
38+
/* in src/styles.css */
39+
40+
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
41+
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
42+
```
43+
44+
Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`.
45+
46+
To verify angular material has been set up correctly, change `src/app/app.component.html` to the following...
47+
```html
48+
<h1>
49+
{{title}}
50+
</h1>
51+
52+
<button md-raised-button>
53+
angular material works!
54+
<md-icon>done</md-icon>
55+
</button>
56+
```
57+
58+
After saving this file, return to the browser to see the angular material styled button.
59+
60+
### More Info
61+
62+
- [Getting Started](https://material.angular.io/guide/getting-started)
63+
- [Theming Angular Material](https://material.angular.io/guide/theming)
64+
- [Theming your own components](https://material.angular.io/guide/theming-your-components)
65+
66+
# Include [Flex Layout](https://github.com/angular/flex-layout) for [Angular Material](https://material.angular.io)
67+
68+
Include Angular Material as detailed above.
69+
70+
Install the `@angular/flex-layout` library and add the dependency to package.json...
71+
```bash
72+
npm install --save @angular/flex-layout
73+
```
74+
75+
Import the Angular Flex-Layout NgModule into your app module...
76+
```javascript
77+
//in src/app/app.module.ts -->
78+
79+
import { FlexLayoutModule } from '@angular/flex-layout';
80+
// other imports
81+
82+
@NgModule({
83+
imports: [
84+
...
85+
FlexLayoutModule.forRoot()
86+
],
87+
...
88+
})
89+
```
90+
91+
Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`
92+
93+
Add the following to `src/app/app.component.css`...
94+
```css
95+
.header {
96+
background-color: lightyellow;
97+
}
98+
99+
.left {
100+
background-color: lightblue;
101+
}
102+
103+
.right {
104+
background-color: pink;
105+
}
106+
```
107+
108+
To verify flex-layout has been set up correctly, change `src/app/app.component.html` to the following...
109+
```html
110+
<div fxLayout="column">
111+
112+
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
113+
114+
<h1>
115+
{{title}}
116+
</h1>
117+
118+
<button md-raised-button>
119+
angular material works!
120+
<md-icon>done</md-icon>
121+
</button>
122+
123+
</div>
124+
125+
<div fxLayout="row">
126+
127+
<div class="left" fxFlex="20">
128+
LEFT: 20% wide
129+
</div>
130+
131+
<div class="right" fxFlex>
132+
RIGHT: 80% wide
133+
</div>
134+
135+
</div>
136+
</div>
137+
```
138+
139+
After saving this file, return to the browser to see the very ugly but demonstrative flex-layout.
140+
141+
Among what you should see are - a light yellow header that is the entire width of the window, sitting directly atop 2 columns. Of those 2 columns, the left column should be light blue, and 20% wide, while the right column is pink, 80% to start, and will flex with window (re)size.
142+
143+
### More Info
144+
145+
- [Installation](https://github.com/angular/flex-layout#installation)
146+
- [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview)
147+
- [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)

0 commit comments

Comments
 (0)