Skip to content

Commit dbeb2ab

Browse files
committed
fix
1 parent e15433e commit dbeb2ab

File tree

1 file changed

+1
-84
lines changed

1 file changed

+1
-84
lines changed

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

+1-84
Original file line numberDiff line numberDiff line change
@@ -60,87 +60,4 @@ After saving this file, return to the browser to see the Angular Material styled
6060

6161
- [Getting Started](https://material.angular.io/guide/getting-started)
6262
- [Theming Angular Material](https://material.angular.io/guide/theming)
63-
- [Theming your own components](https://material.angular.io/guide/theming-your-components)
64-
65-
# Include [Flex Layout](https://github.com/angular/flex-layout) for [Angular Material](https://material.angular.io)
66-
67-
Include Angular Material as detailed above.
68-
69-
Install the `@angular/flex-layout` library and add the dependency to package.json...
70-
```bash
71-
npm install --save @angular/flex-layout
72-
```
73-
74-
Import the Angular Flex-Layout NgModule into your app module...
75-
```javascript
76-
//in src/app/app.module.ts
77-
78-
import { FlexLayoutModule } from '@angular/flex-layout';
79-
// other imports
80-
81-
@NgModule({
82-
imports: [
83-
...
84-
FlexLayoutModule.forRoot()
85-
],
86-
...
87-
})
88-
```
89-
90-
Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`
91-
92-
Add the following to `src/app/app.component.css`...
93-
```css
94-
.header {
95-
background-color: lightyellow;
96-
}
97-
98-
.left {
99-
background-color: lightblue;
100-
}
101-
102-
.right {
103-
background-color: pink;
104-
}
105-
```
106-
107-
To verify flex-layout has been set up correctly, change `src/app/app.component.html` to the following...
108-
```html
109-
<div fxLayout="column">
110-
111-
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
112-
113-
<h1>
114-
{{title}}
115-
</h1>
116-
117-
<button md-raised-button>
118-
Angular Material works!
119-
<md-icon>done</md-icon>
120-
</button>
121-
122-
</div>
123-
124-
<div fxLayout="row">
125-
126-
<div class="left" fxFlex="20">
127-
LEFT: 20% wide
128-
</div>
129-
130-
<div class="right" fxFlex>
131-
RIGHT: 80% wide
132-
</div>
133-
134-
</div>
135-
</div>
136-
```
137-
138-
After saving this file, return to the browser to see the very ugly but demonstrative flex-layout.
139-
140-
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.
141-
142-
### More Info
143-
144-
- [Installation](https://github.com/angular/flex-layout#installation)
145-
- [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview)
146-
- [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)
63+
- [Theming your own components](https://material.angular.io/guide/theming-your-components)

0 commit comments

Comments
 (0)