Are Layout directives supported by Angular 2 material design components?

Question

I am trying to use Angular2 Material Design components and I cannot 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> <div layout="column"> <div flex>First item in column</div> <div flex>Second item in column</div> </div> 

But this is not the case - it just displays the elements on the page as plain old divs. (I am using the latest version of Chrome).

I missed something, for example, is there a CSS file that I have to import?

Answer 1

January 2017 Update :

Team

Angular 2 recently added the new NPM flex-layout package for layout only. This is a standalone package independent of angular material.
Full instructions are available on the github README page.

Install the module:

npm install @ angular / flex-layout -save

In app.module.ts (or equivalent) declare a module:

 import {FlexLayoutModule} from "@angular/flex-layout"; @NgModule({ imports: [ ... FlexLayoutModule ], ... }) 

Layout Example:

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

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

---

Original answer :

The docs you refer to refer to the material of the corner1. Angular2 stuff still does not have layout directives.

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

All you need to know:

layout="row" matches style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

And flex equals style="flex:1"

As directives:

 @Directive({ selector:'[layout]' }) export class LayoutDirective{ @Input() layout:string; @HostBinding('style.display') display = 'flex'; @HostBinding('style.flex-direction') get direction(){ return (this.layout === 'column') ? 'column':'row'; } } 

The flex directive, use it as: <div flex> or <div flex="10"> any number from 0 to 100%. In addition, just for fun, I added a reduction and increase in inputs

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

To use them everywhere without adding them to each component:

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

Here is an example in plunk

Answer 2

No need to write a new directive until Material2 provides us with a LayoutModule.

You just need to import angular layouts-attributes.css from angular1. It accepts the old directive as a css selector.

required ('node_modules / angular -Material / modules / layouts / angular -material.layouts-attributes.css')

for example, css for the directive layout-align = "end" uses the css selector: [layout-align = "end"]

Answer 3

Another option is to use angular2-polymer to pull out the Polymer 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 .