Skip to content

stories include angular flex

Hans Larsen edited this page Aug 18, 2017 · 3 revisions

Include Flex Layout in your CLI application

Above is snapshot of a Online Demos using @angular/flex-layout


Include @angular/flex-layout as detailed below:

Install the library and add the dependency to package.json...

npm install --save @angular/flex-layout

Or install the nightly build using:

npm i --save @angular/flex-layout-builds

Import the Angular Flex-Layout NgModule into your app module...

//in src/app/app.module.ts 

import { FlexLayoutModule } from '@angular/flex-layout';
// other imports 

@NgModule({
  imports: [
    ...
    FlexLayoutModule
  ],
  ...
})

Run ng serve to run your application in develop mode, and navigate to http://localhost:4200


Sample App

Add the following to src/app/app.component.css...

[fxLayout="column"] { border: 1px solid;padding:4px; margin-top:50px; },
[fxFlex]{  padding:5px;},
h3      {  padding-top:20px; },
.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...

 <div fxLayout="column">
   <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
       <h3>
         {{title}}
       </h3>
   </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.

screen shot 2017-08-05 at 7 20 05 pm

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

Clone this wiki locally
You can’t perform that action at this time.