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 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.
The following directions will work using the latest version of angular-cli@webpack
Install with npm npm install --save ng2-flex-layout
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 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";
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
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>