@@ -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