Angular 2 Material Responsive Layout Directives
npm install ng2-flex-layoutnpm install --save ng2-flex-layoutLayoutModule and add it to the imports of your app's AppModulejavascript
// src/app/app.module.tsimport { 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 { }
`$3
Import the required css file into your app's styles.css file
`css
/ src/styles.css /
@import "../node_modules/ng2-flex-layout/dist/ng2-flex-layout.css";
`
Usage
$3
The layout directive allows you to specify a layout container and the direction in which the children will flow:example
`html
1
2
3
`You can also specify different layout directions for different screen sizes
`html
1
2
3
`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$3
Using the flex directive on a container's child elements allows you to specify the percentage of available room each element should fill.
`html
1
2
`
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
`html
1
2
``