Skip to content

chore(docs): fix angular-material PR #4208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 24, 2017
Merged

chore(docs): fix angular-material PR #4208

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 1 addition & 84 deletions docs/documentation/stories/include-angular-material.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,87 +60,4 @@ After saving this file, return to the browser to see the Angular Material styled

- [Getting Started](https://material.angular.io/guide/getting-started)
- [Theming Angular Material](https://material.angular.io/guide/theming)
- [Theming your own components](https://material.angular.io/guide/theming-your-components)

# Include [Flex Layout](https://github.com/angular/flex-layout) for [Angular Material](https://material.angular.io)

Include Angular Material as detailed above.

Install the `@angular/flex-layout` library and add the dependency to package.json...
```bash
npm install --save @angular/flex-layout
```

Import the Angular Flex-Layout NgModule into your app module...
```javascript
//in src/app/app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
// other imports

@NgModule({
imports: [
...
FlexLayoutModule.forRoot()
],
...
})
```

Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`

Add the following to `src/app/app.component.css`...
```css
.header {
background-color: lightyellow;
}

.left {
background-color: lightblue;
}

.right {
background-color: pink;
}
```

To verify flex-layout has been set up correctly, change `src/app/app.component.html` to the following...
```html
<div fxLayout="column">

<div class="header" fxLayout="row" fxLayoutAlign="space-between center">

<h1>
{{title}}
</h1>

<button md-raised-button>
Angular Material works!
<md-icon>done</md-icon>
</button>

</div>

<div fxLayout="row">

<div class="left" fxFlex="20">
LEFT: 20% wide
</div>

<div class="right" fxFlex>
RIGHT: 80% wide
</div>

</div>
</div>
```

After saving this file, return to the browser to see the very ugly but demonstrative flex-layout.

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.

### More Info

- [Installation](https://github.com/angular/flex-layout#installation)
- [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview)
- [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)
- [Theming your own components](https://material.angular.io/guide/theming-your-components)