Skip to content

chore(docs): add flex-layout directions #4096

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.

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

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
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
77 changes: 77 additions & 0 deletions docs/documentation/stories/include-angular-flex.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# Include [Flex Layout](https://github.com/angular/flex-layout) in your CLI application

Include Angular Flex layout 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>

</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)