diff --git a/docs/documentation/stories/include-angular-flex.md b/docs/documentation/stories/include-angular-flex.md new file mode 100644 index 000000000000..66be0c49d664 --- /dev/null +++ b/docs/documentation/stories/include-angular-flex.md @@ -0,0 +1,82 @@ +# 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 +