@@ -60,87 +60,4 @@ After saving this file, return to the browser to see the Angular Material styled
60
60
61
61
- [ Getting Started] ( https://material.angular.io/guide/getting-started )
62
62
- [ 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