@angular/flex-layout - npm Package Versions

5.0.0-beta.14 (2018-03-29)

BREAKING CHANGES

• tokens: * fxFlex no longer adds display: flex; flex-direction: row by default
• validateSuffixes: * validateSuffixes is no longer exported for public use. Please use the new BreakPoints API. If you must use validateSuffixes, please use DEFAULT_BREAKPOINTS_PROVIDER_FACTORY, which is a deprecated wrapper around validateSuffixes (please note this has already been removed in the nightly builds, and will be removed completely in the next release)

BEFORE:

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

AFTER:

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

The functions can be called in the exact same manner, as DEFAULT_BREAKPOINTS_PROVIDER_FACTORY is simply a wrapper around validateSuffixes. Please note that DEFAULT_BREAKPOINTS_PROVIDER_FACTORY is deprecated in this release.

Bug Fixes

• breakpoints: add global provider for BreakPointRegistry (7cedf6f)
• demo-app: add polyfills for IE11 to demo-app (a425035)
• demo-app: fix sizing for layout-gap demo (0562fcc)
• fxFlex: apply correct flex-basis stylings (#629) (1e96cea), closes #277 #280 #323 #528 #534
• fxFlex: fix non-wrapping behavior and default fxFlex value (3cfafd1)
• fxFlex: fix wrapping in older versions of Safari (3809608)
• fxFlex: make sure not to set width/height when flex is default (b152998)
• fxLayoutGap: add proper gaps for reverse dir (3a8041d)
• layout-gap: apply correct gaps based on flex order (de72903), closes #608
• lib: resolve RegExp Issue in older versions of Safari (#643) (85e8aa2)
• release: Fix release script by removing ',' of the last item in the list (0486e85)
• ssr: fix lazy-loading functionality (d4f2514)

Features

• demo-app: add version number to header (c984937)
• demo-app: use Angular CLI to build demo and universal apps (eda12c3)
• demo-app: use/register custom breakpoints (0d4144c)
• fxLayoutGap: add gutter functionality to layout-gap (84ca5c3)
• tokens: add configuration for breakpoints and flex styles (605f4d1)

<a name="5.0.0-beta.13"></a>

5.0.0-beta.13 (2018-02-22)

This @angular/flex-layout release provides full support for Angular 5.x

This release bumps the version for parity with Angular Material and latest builds of Angular.

Angular SSR support has been fixed and is now enabled properly. Developers should see Live Demo Docs for details on how to build and test [locally] the demo applications.

Features

• apps: use Angular CLI to build demo and universal apps (eda12c3)
• ssr: enhance support for Universal and SSR with stylesheets (cf5266a), closes #373 #567

Bug Fixes

• css: add prefixed values before standard ones (0c1bf4a)
• lib: apply correct layout gaps based on flex order (de72903), closes #608
• lib: apply correct RTL margins (7699957)
• lib: read correct styles during SSR and add test for layout-wrap (71e2dae)
• lib: remove private Angular 'getDom()' APIs (#402) (703add02ad), closes #547
• ssr: add browser check for MatchMedia (9dd03c6), closes #624

Documentation Fixes

• docs: add Universal app changes to documentation (1cf8a810)
• docs: add ability to submit PRs for docs (39c78be), closes #550 #520
• docs: restore images within links (d9edab8)

BREAKING CHANGES

• fxLayoutWrap: * [fxLayoutWrap] was deprecated in earlier betas. fxLayoutWrap has now been removed. Developers should use fxLayout options.

before

<div  fxLayout="row" fxLayoutWrap="wrap"> ... </div>

current

<div  fxLayout="row wrap"> ... </div>

Contributor(s)

To succeed in OSS, you have to get the community involved. Most of all, the developer community needs to contribute solutions, fixes, and enhancements to the project's growth.

Thank you to the contributors who helped with the v5.0.0-beta.13 release:

<table> <thead> <tr> <th align="center"><a href="https://github.com/CaerusKaru"> <img alt="Splaktar" src="https://avatars3.githubusercontent.com/u/416563?v=4&amp;s=117" width="117" style="max-width:100%;"> </a> </th> </tr> </thead> <tbody> <tr> <td align="center" class="annotated"> <a href="https://github.com/CaerusKaru"> <span>CaerusKaru</span> </a> </td> </tbody> </table>

Adam has worked tirelessly on the design and implementation of the Flex Layout SSR solution, an improved docs experience, bug fixes, and so much more. How does he find the time? We try not to ask...

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

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

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

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

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

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)

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

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

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

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>

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