Are Layout Directives supported by Angular 2 Material Design Components?

Question

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

Answer 1

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:

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:

or

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

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...