angular2-flex

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.