Are Layout Directives supported by Angular 2 Material Design Components?

AngularFlexboxMaterial Design

Angular Problem Overview

I'm trying to use the Angular2 Material Design components, and I can't get any of the layout directives to work. Example:

According to the examples, this should "just work":

<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>

But it doesn't - it just renders the elements on the page as plain old divs. (I'm using the latest version of Chrome).

Am I missing something, like is there a CSS file I'm supposed to import?

Angular Solutions

Solution 1 - Angular

January 2017 Update:

Angular 2 team recently added a new NPM package flex-layout for layout only. It is a separate package independent of angular material.
The full instructions are available in the github page README.

Install the module:

> npm install @angular/flex-layout -save

In app.module.ts (or equivalent), declare the module:

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

  imports: [ 

Markup example:

<div class="flex-container" 
     fxLayoutAlign="center center"
  <div class="flex-item" fxFlex="20%" fxFlex.xs="40%">  </div>
  <div class="flex-item" fxFlex>        </div>
  <div class="flex-item" fxFlex="25px"> </div>

Here is a plunker sample taken from the flex-layout github page.

Original Answer:

The docs you are referring to are for angular1 material. Angular2 material still doesn't have any layout directives.

You can easily create the directive yourself in a simple way.

All you need to know:

layout="row" is same as style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

And flex is equal to style="flex:1"

As directives:

export class LayoutDirective{
  @Input() layout:string;
  @HostBinding('style.display') display = 'flex';

  get direction(){
       return (this.layout === 'column') ? 'column':'row';

The flex directive, use it like: <div flex> or <div flex="10"> any number from 0 - 100%. Also, just for fun, I added shrink and grow inputs

export class FlexDirective{
    @Input() shrink:number = 1;
    @Input() grow:number = 1;
    @Input() flex:string;
    get style(){
        return `${this.grow} ${this.shrink} ${this.flex === '' ? '0':this.flex}%`;

To use them everywhere without adding them to each component:

  imports:      [ BrowserModule ],
  declarations: [ AppComponent,FlexDirective ,LayoutDirective ],
  bootstrap:    [ AppComponent ]
export class AppModule { }

Here is a sample in plunk

Solution 2 - Angular

No need to write a new directive until Material2 provide us the LayoutModule.

You just have to import the angular layouts-attributes.css from angular1. It takes the old directive as css selector.

> require('node_modules/angular-material/modules/layouts/angular-material.layouts-attributes.css')

for example the css for directive layout-align="end" it use the css selector: [layout-align="end"]

Solution 3 - Angular

Another option is to use angular2-polymer in order to pull in Polymer's iron-flex-layout. It is slightly more limited and has a slightly different API than the Material 1 layout (but the Material 2 layout will also have a different API). But it works now and is supported.

There is also a guide here.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMarcel LamotheView Question on Stackoverflow
Solution 1 - AngularAbdulrahman AlsoghayerView Answer on Stackoverflow
Solution 2 - Angularlekev87View Answer on Stackoverflow
Solution 3 - AngularSplaktarView Answer on Stackoverflow