Flex Layout for Angular

Flex Layout is a component engine that was recently announced by the Angular team. It allows to easily create Flexbox-based page layouts with a set of directives available to use in your templates. No need for separate CSS styling. The library itself is written in pure TypeScript, so no external stylesheets are needed. It also provides a way to specify different directives at different breakpoints to create responsive layouts.

Flex Layout stands on its own, and it can also be used in combination with Angular Material for Material Design components.

Installing

Install Flex Layout from npm:

$ npm install @angular/flex-layout --save

Or with Yarn:

$ yarn add @angular/flex-layout

Now import FlexLayoutModule in your app module:

Module: app.module.ts

// ...
import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule.forRoot()
  ],
  // ...
})
export class AppModule {}

Flex Layout is now ready to be used in your templates.

Playing with Flex Layout

Here’s a figure showing the demo layout that we’ll be creating in this post:

Flex Layout Demo

And here’s the markup needed in our template to create the layout:

Template: app.component.html

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="15%">Item 1</div>
  <div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
  <div class="item item-3" fxFlex>Item 3</div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>

That’s all we need to create our layout, no CSS needed. And most of the directives are pretty self-explanatory too. In our demo, only minor styling was added like a background color and rounded corners to our items.

Here are a few takeaways:

  • The fxLayout directive on the container sets the flex container. Its value defaults to row, so we don’t need to provide any value for the default behavior.
  • We want the layout to collapse into a single column on extra-small devices, so we use the .xs notation with fxLayout to give it a direction of column. We could also use other breakpoints like sm, md, lg and xl.
  • We changed the order of the items in our 1st row by using the fxFlexOrder directive on Item 2.
  • We set gaps between flex items with fxLayoutGap.
  • The classes used on the container and items (container, item, item-1, …) are not needed by Flex Layout. They are used for our own extra styling.
  • We hard-coded the directive values in this example, but we could just as well have used data binding to bind to values in the component class (E.g. [fxLayout]="direction"). This makes it easy to create highly dynamic layouts that the user can control and change.

Further Reading

You can reference the API overview for a more in-depth look at the available directives.

✖ Clear

🕵 Search Results

🔎 Searching...