API Documentation for ngStyle and ngClass uses different syntax

[molcik]

Bug

In API documentation is written to use ngClass and ngStyle but it doesn't work. To use responsive features you have to use class and style

Example

To change font-size you have to use:
[style.sm]="{'font-size.px': 40}"
instead of:
[ngStyle.sm]="{'font-size.px': 40}"

https://plnkr.co/edit/b7XxsdgBAISf0KzRDwte?p=preview

Version

@angular/flex-layout: ^2.0.0-rc.1

[intellix]

I tripped up over this as well :)

[ThomasBurleson]

This has been fixed in the nightly builds:

To use the most recent, pre-release builds, change this configuration in your Plunker:

config.ts

'@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',

test-app.ts

    Adjust the width to watch font size change:
    instead of 
    <div class="containerX" [ngStyle.sm]="{'font-size': '20px'}">
      <div [fxLayout]="direction" (click)="toggleDirection()" class="colored box" >
        <div fxFlex="20">  fxFlex="20"  </div>
        <div fxFlex="60">  fxFlex="60"  </div>
        <div fxFlex >      fxFlex       </div>
      </div>
    </div>

[ThomasBurleson]

Also see PR #204

[ThomasBurleson]

@molcik, @intellix - Please see #228 for more improvements regarding Responsive APIs for class, style, ngClass, and ngStyle. You can also review our online ngClass API Docs

It should be noted that class assignments are considered destructive and will overwrite any existing class names currently in use. While ngClass is addition/subtractive based on the expressions provided.

Depends on PR #228