Are Layout Directives supported by Angular 2 Material Design Components?
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";
@NgModule({
imports: [
...
FlexLayoutModule
],
...
})
Markup 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 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:
@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 like: <div flex>
or <div flex="10">
any number from 0 - 100%. Also, just for fun, I added shrink and grow 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 a sample in plunk
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"]
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.