@angular/flex-layout - npm Package Versions

2.0.0-beta.5 (2017-02-09)

Bug Fixes

• breakpoints: resolve 1px hole between lg -> xl breakpoints (#159) (d78527c), closes #149
• FlexLayoutModule: remove use of static ngModule.forRoot() (#167) (86010bf)
• FlexLayoutModule: add observable-media-service to exported barrel (#139) (b7dffaa)
• fxFlex: fix use of values with 'auto' (#122) (04d24d5), closes #120
• fxFlex: prevent setting min/max-size when grow/shrink is zero (#160) (942939e), closes #153
• fxHide,fxShow: restore orig display mode and more... (#143) (d269d73), closes #140 #141
• fxHide,fxShow: fix standalone breakpoint selectors (#121) (0ca7d07), closes #62 #59 #105
• fxLayoutGap: add gaps to dynamic content (#124) (6482c12), closes #95
• fxLayoutGap: fxLayoutWrap to apply gap logic for reverse directions (#148) (9f7137e), closes #108
• fxLayoutGap: skip hidden element nodes (#145) (6c45b35), closes #136
• fxClass,fxStyle: enable raw input caching (#173) (d5b283c)
• ObservableMedia: expose asObservable() for rxjs operators (#133) (6e46561), closes #125

Features

• API: use protected access to allow API directives to be easily extended (#163) (e6bc451)
• fxClass,fxStyle: add responsive support for ngClass and ngStyle (#170) (f57a63d)
• ObservableMedia: use ObservableMedia class as provider token (#158) (dad69fe)

BREAKING CHANGES

• ObservableMedia: Deprecated use of ObservableMediaService opaque token. Developers now simply use the ObservableMedia class to inject the service.
• FlexLayoutModule: Previously releases used FlexLayoutModule.forRoot(); This has been deprecated.

before

constructor( @Inject(ObserverableMediaService) media:any ) { ... }

after

constructor(private media:ObservableMedia) { ... }

• ObservableMedia: use class ObservableMedia to inject instance of service
• use MediaService::asObservable() to get instance of observable

// RxJS
import 'rxjs/add/operator/map';
import {ObservableMedia} from '@angular/flex-layout';

@Component({ ... })
export class MyComponent {
  constructor( media:ObservableMedia ) {
    media.asObservable()
      .map( (change:MediaChange) => change.mqAlias == 'md' )
      .subscribe((change:MediaChange) => {
        let state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
        console.log( state );
      });
  }
}

Previously releases used FlexLayoutModule.forRoot(). This has been deprecated and will output a console.warn() if used.

-before-

@NgModule({
  declarations : [...],
  imports : [
    CommonModule,
    FlexLayoutModule.forRoot()
  ]
})
export class DemosResponsiveLayoutsModule { }

-after-

@NgModule({
  declarations : [...],
  imports : [ CommonModule, FlexLayoutModule ]
})
export class DemosResponsiveLayoutsModule { }

<a name="2.0.0-beta.4"></a>

2.0.0-beta.4 (2017-01-27)

Bug Fixes

• flex: fix use of values with 'auto' (#122) (04d24d5), closes #120
• fxHide,fxShow: fix standalone breakpoint selectors (#121) (0ca7d07), closes #62 #59 #105
• fxLayoutGap: add gaps to dynamic content (#124) (6482c12), closes #95
• matchMediaObservable: expose observable for rxjs operators (#133) (6e46561), closes #125

BREAKING CHANGES

• matchMediaObservable: * use opaque token ObservableMediateService to inject instance of MediaService
• use MediaService::asObservable() to get instance of observable

// RxJS
import 'rxjs/add/operator/map';

@Component({ ... })
export class MyComponent {
  constructor( @Inject(ObservableMediaService) media) {
    media.asObservable()
      .map( (change:MediaChange) => change.mqAlias == 'md' )
      .subscribe((change:MediaChange) => {
        let state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
        console.log( state );
      });
  }
}

<a name="2.0.0-beta.3"></a>

2.0.0-beta.3 (2017-01-17)

<a name="2.0.0-beta.2"></a>

2.0.0-beta.1 (2016-12-24)

Initial public release to NPM