ngClass API

The @angular/flex-layout ngClass directive is a subclass of the @angular/common ngClass directive.

Standard class Features

Developers using the class selector should note that classname assignments with this selector (and its responsive versions) are destructive and will overwrite any existing classnames in use.

For example:

<div class="class0" ngClass.xs="class1 class2"></div>

By default the div will have only the class0 classname assigned.

• When the xs breakpoint activates, then the div will have class1 and class2 assigned but not class0.
• When the xs breakpoint deactivates, then the div will only have the class0 name assigned.

Standard ngClass Features

Traditionally ngClass adds and removes CSS classes on an HTML element:

The CSS classes are updated as follows, depending on the type of the expression evaluation:

• • string - the CSS classes listed in the string (space delimited) are added,
• • Array - the CSS classes declared as Array elements are added,
• • Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element  ngClass="first second"> </some-element>
<some-element [ngClass]="['first', 'second']"> </some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}"> </some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}"> </some-element>

Responsive Features

The Flex-Layout ngClass adds responsive features to also add/remove CSS classes; but only for activated breakpoints.

Example #1:

<div
   ngClass="first second" 
   [ngClass.xs]="{'first':false, 'third':true}"
   [ngClass.sm]="{'first':true, 'second':true}" >
      TESTING
</div>

See Plunker Demo

Example #2:

<div
   [ngClass]="['first', 'second']" 
   ngClass.gt-xs="third" >
     TESTING
</div>

See Plunker Demo

Merging Classes

Note that the default classes (specified by class="" and ngClass="..." will be preserved (and merged) into other activation class lists UNLESS the breakpoint has specified that a default class should be removed:

Below the class first is used for all mediaQuery activations except for 'xs' (mobile) where it is explicitly removed;

<some-element  
    ngClass="first" 
    [ngClass.xs]="{'first':false, 'third':true}">
</some-element>