Angular2-Flex - Flexbox directives for Angular 2

The goal of this project is to provide interum flexbox support for angular 2 apps while the Angular Material Team is busy working on Angular Material 2. With some luck all of the existing Angular Material directives will be supported.

Demo Site: https://angular2-flex.firebaseapp.com/

Usage

Install via NPM npm i -S angular2-flex

Add a link to /node_modules/angular2-flex/layout.css

Update your AppModule

import {Angular2FlexModule} from 'angular2-flex'; // <- do this
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Angular2FlexModule.forRoot(), // <- do this
  ],
  declarations: [
    DemoApp
  ]
})

Development

Currently working on:

• Get flex-offset working
• Add documentation for directives
• Update README for directives with samples
• $media service like Angular Material but using observables
• Move SCSS files into their respective components
• Added Unit tests and e2e tests

Feature status:

| Feature | Status | Docs | Issue | |------------------|-------------------------------------|--------------|----------------| | layout | Available | README | - | | flex | Available | README | - | | flex-order | Available | README | - | | flex-offset | Available | README | - | | layout-align | Available | README | - | | layout-fill | Available | README | - | | layout-wrap | Available | README | - | | layout-nowrap | Available | README | - | | layout-margin | Available | README | - | | layout-padding | Available | README | - | | show | Available | README | - | | hide | Available | README | - | | media | Not started | - | - |

"Available" means that the components or feature is published and available for use, but may still be missing some behaviors or polish.

Thanks

The Angular Material 2 project was used a base for this project build system it is a thing of beauty. Some of the logic and scss files from Angular Material 1 were used for this project as well. Thanks to the Angular Team for all of their great work on all of their projects.