From dbeb2ab3235c3a13747e1a21615a10824469e58a Mon Sep 17 00:00:00 2001 From: Jeremy Wells Date: Tue, 24 Jan 2017 12:59:07 -0500 Subject: [PATCH] fix --- .../stories/include-angular-material.md | 85 +------------------ 1 file changed, 1 insertion(+), 84 deletions(-) diff --git a/docs/documentation/stories/include-angular-material.md b/docs/documentation/stories/include-angular-material.md index 6fbcaba7a387..1ee53154a73b 100644 --- a/docs/documentation/stories/include-angular-material.md +++ b/docs/documentation/stories/include-angular-material.md @@ -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 -
- -
- -

- {{title}} -

- - - -
- -
- -
- LEFT: 20% wide -
- -
- RIGHT: 80% wide -
- -
-
-``` - -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) \ No newline at end of file