WARNING This project is no longer in development

Until there is an official solution from the material 2 team, I recommend including the Sass files from angular meterial 1 and either using the attribute selectors directly (same way you would in material 1). Or just using the classnames directly if you have to support some IE versions or just prefer a class-based api.

Check out this thread for more info: https://github.com/angular/material2/issues/946

ng2-flex-layout

ng2-flex-layout is a small set of Angular 2 attribute directives aimed at providing flex-box based responsive layout directives that are api-compatible with those found in Angular Material 1.

Installation/Setup

The following directions will work using the latest version of angular-cli@webpack

Install with NPM

Install with npm npm install --save ng2-flex-layout

Add Module as a Dependency to Your App

Import LayoutModule and add it to the imports of your app's AppModule

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { LayoutModule } from 'ng2-flex-layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import Required CSS File

Import the required css file into your app's styles.css file

/* src/styles.css */
@import "../node_modules/ng2-flex-layout/dist/ng2-flex-layout.css";

Usage

Layout Containers

The layout directive allows you to specify a layout container and the direction in which the children will flow:

example

<div layout="row">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

You can also specify different layout directions for different screen sizes

<div layout="row" layoutXs="column">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

The container in the example above will have a flex-direction of column on extra small screen sizes and a flex-direction of row on all other screen sizes. See the Angular Material 1 documentation for breakpoint details

Layout Children

Using the flex directive on a container's child elements allows you to specify the percentage of available room each element should fill.

<div layout="row">
  <div flex="20"> 1 </div>
  <div flex="80"> 2 </div>
</div>

In the example above, the first child element will take up 20% of the available width of its parent and the 2nd child element will take up 80%.

Similar to containers, you can also specify different flex percentages for different screen sizes

<div layout="row">
  <div flex="20" flexXs="40"> 1 </div>
  <div flex="80" flexXs="60"> 2 </div>
</div>