2.0.0-beta.12 (2017-12-14)

The 2.0.0-beta.10 and beta.11 releases on npm accidentally glitched-out midway, so we resolved some release scripting issues and cut 2.0.0-beta.12 instead. oops :-)

Build Changes

Similar to those used in @angular/material, this release also upgrades the package dependencies to Angular ~5.1.0 and the RxJS 5.5.x.

Pipeable RxJS operators are now used instead of prototype-patching add operators.

packages: update deps to Angular v5 and RxJs 5.5 (#523) (62457a5972), closes #519

2.0.0-beta.11 (2017-11-05)

This release was just to fix an issue with npm peerDependencies not being set correctly.

2.0.0-beta.10 (2017-10-31)

Bug Fixes

api: defer getComputedStyle() calls until ngOnInit phase (#374) (3611003), closes #310
api: layout with layoutAlign was not responding to reverse directions (dde6e87), closes #82
api: remove circular dependencies (7bff29e), closes #88
api: remove use of static ngModule.forRoot() (#167) (86010bf)
api: restore orig display mode and more... (#143) (d269d73), closes #140 #141
api: support query children on API directives (#290) (f5558de)
api: use only Renderer2 instances (#391) (816d85a)
api, class: fix valid ngClass usages (db2fd59), closes #428
api, class: selector [class] should be removed from ClassDirective. (#394) (7a48c25), closes #393
api, class, style: remove deprecated selectors (#419) (e461d17), closes #410 #408 #273 #418
auto-prefixer: resolve perf impacts as reported by LightHouse (#283) (bc0c900), closes #282
breakpoints: resolve 1px hole between lg -> xl breakpoints (#159) (d78527c), closes #149
breakpoints: support print media (#367) (37a0b85), closes #361
build: add observable-media-service to exported barrel (#139) (b7dffaa)
build: angular versions are not properly inserted (e3b7fde), closes #470
build: remove use of Angular private API (#195) (d95cb09), closes #193
build: support Angular 4 and AOT (#255) (fed87fa), closes #254 #236 #227
changelog: fix invalid parentheses and semver checks (96aaa78)
closure-compiler: use Number to cast (#289) (052a4a9)
css: add prefixed styles before standard ones (99eabfb), closes #467 #468
demo: correctly use template instead of templateUrl (#100) (c436824)
demo: fix bindings for fxLayout with AoT (#101) (51ea29e)
demo: import MdCheckboxModule (5f198a3)
demo: improve use of ObservableMedia service (#214) (64b122a)
demo, media-query-status: should use async pipe with ObservableMedia (0e7d2e0)
flex: add min-width to elements with flex basis using px values (3fe5ea3), closes #68
flex: fix use of values with 'auto' (#122) (04d24d5), closes #120
flexbox: add default display property to getDisplayStyle() (#301) (771f2c9)
flexbox: resolve 'renderer.setStyle()' error (#298) (3e1fcbd), closes #270
flexbox: scan flex-direction in css stylesheet (#365) (635c4f5), closes #272 #364
FlexLayoutModule: remove console.warn() conflicts with ngc+AOT (#179) (0797c85), closes #174 #175 #176 #178
fxFlex: fxFlex=auto with overlapping breakpoints activated (#183) (cb614ed), closes #135
fxFlex: improve support for 'auto' and flex-basis variations (#212) (c28dfc7)
fxFlex: prevent setting min/max-size when grow/shrink is zero (#160) (942939e), closes #153
fxFlexFill, fxFlexAlign: update selectors and wiki (8f591c5), closes #93
fxFlexOffset: use parent flow direction for margin property (#369) (f0473e9), closes #328
fxHide,fxShow: fix standalone breakpoint selectors (#121) (0ca7d07), closes #62 #59 #105
fxLayoutAlign: support flex-start and flex-end options (#239) (eb5cb9f), closes #232
fxLayoutGap: add gaps to dynamic content (#124) (6482c12), closes #95
fxLayoutGap: fxLayoutWrap to apply gap logic for reverse directions (#148) (9f7137e), closes #108
fxLayoutGap: mutation observer should run outside the ngZone (#370) (9fb0877), closes #329
fxLayoutGap: skip hidden element nodes (#145) (6c45b35), closes #136
fxLayoutGap: update gap logic when num children reduces to 1. (43b34fa), closes #433 #444
fxShow, fxHide: support fxHide+fxShow usages on same element (#190) (eee20b2)
fxStyle: enable raw input caching (#173) (d5b283c)
lib: remove all uses of @internal (ca64760)
lib, media-query: support angular/universal (#353) (0f13b14), closes #187 #354 #346
matchMediaObservable: expose observable for rxjs operators (#133) (6e46561), closes #125
MatchMediaObservable: register breakpoints so observable announces properly (3555e14), closes #65 #64
ngClass: add ngClass selector support (#223) (980d412), closes #206
ngClass,ngStyle: support proper API usages and ChangeDetectionStrategy.OnPush strategies (#228) (5db01e7), closes #206 #215
ngStyle, ngClass: StyleDirective security fixes & merge activated styles (#198) (eb22fe5), closes #197
observableMedia: consistently emit initial value (f19bff2)
ObservableMedia: properly announce 'xs' activation at startup (#396) (66f3717), closes #388
ObservableMedia: provide consistent reporting of active breakpoint (#186) (aa0dab4), closes #185
ObservableMedia: startup should propagate lastReplay value properly (#313) (00ac57a), closes #245 #275 #303
import specific symbols from rxjs (#99) (88d1b0f)
prefixer: improve flex css prefixes (#276) (beb5ed0)
release: fix checkout CHANGELOG.md from origin/master (e17cdc1)
release: updates to commit to version changes: (c2463a5)
test: fix test for fxFlex='' (fcf851f)
tests: remove unneeded async() wrappers in karma tests (a77de3c)
universal: remove browser check from style-utils (8dcae02), closes #466

Features

api: add responsive API for img elements (#382) (45cfd2e), closes #366 #376
api: add responsive API for img elements (#384) (354f54f), closes #366 #81 #376
api: add responsive support for ngClass and ngStyle (#170) (f57a63d)
breakpoints: support custom breakpoints and enhanced selectors (#204) (ecc6e51)
flexbox: use protected access to allow API directives to be easily extended (#163) (e6bc451)
fxFlex: compute immediate parent flex-direction (#220) (ba0d85d)
layout: add wrap options support to fxLayout (#207) (2340a19)
ObservableMedia: use ObservableMedia class as provider token (#158) (dad69fe)

BREAKING CHANGES

ngStyle, ngClass: * [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors
[class.<alias>] selectors are deprecated in favor of [ngClass.<alias>] selectors
default styles are merged with activated styles

<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>

<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>

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

before

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

after

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

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 );
      });
  }
}

2.0.0-beta.9 (2017-08-22)

This @angular/flex-layout release provides full support for Angular 4.x; along with a long list of improvements:

support for AOT and universal builds,
more online demos and samples,
improved performance,
and more...

Note that Angular 2.x is no longer supported.

Features

api, ngClass, ngStyle: add responsive support for ngClass and ngStyle (#170) (f57a63d)
breakpoints: support custom breakpoints and enhanced selectors (#204) (ecc6e51)
flexbox: use protected access to allow API directives to be easily extended (#163) (e6bc451)
fxFlex: compute immediate parent flex-direction (#220) (ba0d85d)
fxLayout: add wrap options support to fxLayout (#207) (2340a19)
ObservableMedia: use ObservableMedia class as provider token (#158) (dad69fe)

BREAKING CHANGES

ngStyle, ngClass: * [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors
[class.<alias>] selectors are deprecated in favor of [ngClass.<alias>] selectors
default styles are merged with activated styles

<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>

<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>

api: Previously releases used FlexLayoutModule.forRoot(). This has been deprecated and removed.

import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ]
})
export class DemoAppModule { }

ObservableMedia: Deprecated use of ObservableMediaService opaque token. Developers now simply use the ObservableMedia class to inject the service.
use MediaService::asObservable() to get instance of observable

before

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

after

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

Example

import {ObservableMedia, MediaChange} from '@angular/flex-layout';

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

Bug Fixes

api: defer getComputedStyle() calls until ngOnInit phase (#374) (3611003), closes #310
api: layout with layoutAlign was not responding to reverse directions (dde6e87), closes #82
api: remove circular dependencies (7bff29e), closes #88
api: remove use of static ngModule.forRoot() (#167) (86010bf)
api: restore orig display mode and more... (#143) (d269d73), closes #140 #141
api: support query children on API directives (#290) (f5558de)
api, flexbox: add default display property to getDisplayStyle() (#301) (771f2c9)
api, flexbox: resolve 'renderer.setStyle()' error (#298) (3e1fcbd), closes #270
api, flexbox: scan flex-direction in css stylesheet (#365) (635c4f5), closes #272 #364
api, breakpoints: resolve 1px hole between lg -> xl breakpoints (#159) (d78527c), closes #149
api, breakpoints: support print media (#367) (37a0b85), closes #361
fxFlex: add min-width to elements with flex basis using px values (3fe5ea3), closes #68
fxFlex: fix use of values with 'auto' (#122) (04d24d5), closes #120
FlexLayoutModule: remove console.warn() conflicts with ngc+AOT (#179) (0797c85), closes #174 #175 #176 #178
fxFlex: fxFlex=auto with overlapping breakpoints activated (#183) (cb614ed), closes #135
fxFlex: improve support for 'auto' and flex-basis variations (#212) (c28dfc7)
fxFlex: prevent setting min/max-size when grow/shrink is zero (#160) (942939e), closes #153
fxFlexFill, fxFlexAlign: update selectors and wiki (8f591c5), closes #93
fxFlexOffset: use parent flow direction for margin property (#369) (f0473e9), closes #328
fxHide,fxShow: fix standalone breakpoint selectors (#121) (0ca7d07), closes #62 #59 #105
fxLayoutAlign: support flex-start and flex-end options (#239) (eb5cb9f), closes #232
fxLayoutGap: add gaps to dynamic content (#124) (6482c12), closes #95
fxLayoutGap: fxLayoutWrap to apply gap logic for reverse directions (#148) (9f7137e), closes #108
fxLayoutGap: mutation observer should run outside the ngZone (#370) (9fb0877), closes #329
fxLayoutGap: skip hidden element nodes (#145) (6c45b35), closes #136
fxShow, fxHide: support fxHide+fxShow usages on same element (#190) (eee20b2)
fxStyle: enable raw input caching (#173) (d5b283c)
matchMediaObservable: expose observable for rxjs operators (#133) (6e46561), closes #125
MatchMediaObservable: register breakpoints so observable announces properly (3555e14), closes #65 #64
ngClass: add ngClass selector support (#223) (980d412), closes #206
ngClass,ngStyle: support proper API usages and ChangeDetectionStrategy.OnPush strategies (#228) (5db01e7), closes #206 #215
ngStyle, ngClass: StyleDirective security fixes & merge activated styles (#198) (eb22fe5), closes #197
ObservableMedia: provide consistent reporting of active breakpoint (#186) (aa0dab4), closes #185
ObservableMedia: startup should propagate lastReplay value properly (#313) (00ac57a), closes #245 #275 #303
lib: remove all uses of @internal (ca64760)
lib, auto-prefixer: resolve perf impacts as reported by LightHouse (#283) (bc0c900), closes #282
lib, media-query: support angular/universal (#353) (0f13b14), closes #187 #354 #346
lib, rxjs: import specific symbols from rxjs insted of using prototype-mutating operators (#99) (88d1b0f)
lib, prefixer: improve flex css prefixes (#276) (beb5ed0)
build: add observable-media-service to exported barrel (#139) (b7dffaa)
build: remove use of Angular private API (#195) (d95cb09), closes #193
build: support Angular 4 and AOT (#255) (fed87fa), closes #254 #236 #227
demo: correctly use template instead of templateUrl (#100) (c436824)
demo: fix bindings for fxLayout with AoT (#101) (51ea29e)
demo: improve use of ObservableMedia service (#214) (64b122a)
demo: add ngxSplitter demo showing how splitters can be used with Flex-Layout (ngxSplitter Demo)

2.0.0-beta.8 (2017-04-18)

BREAKING CHANGES

These changes to @angular/flex-layout will require Angular v4.x and will not be compatible with Angular v2.x.

Bug Fixes

build: support Angular 4 and AOT (#255) (fed87fa), closes #254 #236 #227

2.0.0-beta.7 (2017-03-17)

Note: Previous Release

We prematurely labeled the previously release @angular/flex-layout v2.0.0-rc.1.
It should have been a beta release and is therefore renamed to @angular/flex-layout v2.0.0-beta.6.

Bug Fixes

demo: improve use of ObservableMedia service (#214) (64b122a)
fxFlex: improve support for 'auto' and flex-basis variations (#212) (c28dfc7)
fxLayoutAlign: support flex-start and flex-end options (#239) (eb5cb9f), closes #232
ngClass: add ngClass selector support (#223) (980d412), closes #206
ngClass,ngStyle: support proper API usages and ChangeDetectionStrategy.OnPush strategies (#228) (5db01e7), closes #206 #215
ngStyle, ngClass: StyleDirective security fixes & merge activated styles (#198) (eb22fe5), closes #197

Features

breakpoints: support custom breakpoints and enhanced selectors (#204) (ecc6e51)
fxFlex: compute immediate parent flex-direction (#220) (ba0d85d)
fxLayout: add wrap options support to fxLayout (#207) (2340a19)

BREAKING CHANGES

FlexLayoutModule.forRoot() was deprecated in beta.6 and is now removed.

- before -

imports : [  FlexLayoutModule.forRoot() ]

- after -

imports : [  FlexLayoutModule ]

ngStyle, ngClass:
- [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors
- [class.<alias>] selectors are destructive replacements (no merging)
- [ngClass.<alias>] selectors will merge (add or remove classnames)
- default styles are merged with activated styles
  - see ngClass API, ngStyle API docs(s) for details.

- before -

<div fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>

- after -

<div fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>

2.0.0-beta.6 (2017-02-23)

Bug Fixes

build: remove use of Angular private API (#195) (d95cb09), closes #193
FlexLayoutModule: remove console.warn() conflicts with ngc+AOT (#179) (0797c85), closes #174 #175 #176 #178
fxFlex: fxFlex=auto with overlapping breakpoints activated (#183) (cb614ed), closes #135
fxShow, fxHide: support fxHide+fxShow usages on same element (#190) (eee20b2)
ObservableMedia: provide consistent reporting of active breakpoint (#186) (aa0dab4), closes #185
release: fix checkout CHANGELOG.md from origin/master (e17cdc1)

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 { }

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 );
      });
  }
}

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

2.0.0-beta.2 (2017-01-13)

Bug Fixes

api: layout with layoutAlign was not responding to reverse directions (dde6e87), closes #82
api: remove circular dependencies (7bff29e), closes #88
changelog: fix invalid parentheses and semver checks (96aaa78)
demo: correctly use template instead of templateUrl (#100) (c436824)
demo: fix bindings for fxLayout with AoT (#101) (51ea29e)
import specific symbols from rxjs (#99) (88d1b0f)
flex: add min-width to elements with flex basis using px values (3fe5ea3), closes #68
fxFlexFill, fxFlexAlign: update selectors and wiki (8f591c5), closes #93
lib: remove all uses of @internal (ca64760)
MatchMediaObservable: register breakpoints so observable announces properly (3555e14), closes #65 #64
test: fix test for fxFlex='' (fcf851f)
tests: remove unneeded async() wrappers in karma tests (a77de3c)

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

Initial public release to NPM

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

2.0.0-beta.12 (2017-12-14)

Build Changes

2.0.0-beta.11 (2017-11-05)

2.0.0-beta.10 (2017-10-31)

Bug Fixes

Features

BREAKING CHANGES

2.0.0-beta.9 (2017-08-22)

Features

BREAKING CHANGES

Example

Bug Fixes

2.0.0-beta.8 (2017-04-18)

BREAKING CHANGES

Bug Fixes

2.0.0-beta.7 (2017-03-17)

Note: Previous Release

Bug Fixes

Features

BREAKING CHANGES

- before -

- after -

- before -

- after -

2.0.0-beta.6 (2017-02-23)

Bug Fixes

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

Bug Fixes

Features

BREAKING CHANGES

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

Bug Fixes

BREAKING CHANGES

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

2.0.0-beta.2 (2017-01-13)

Bug Fixes

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