ngClass API

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

Standard 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.

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

For `xs`, the above ^ will <br/>
*  remove the class='first', <br/>
*  keep the class='second', and <br/>
*  add the class='third' <br/>

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

Here ^, for `sm` or larger viewport sizes the resulting <br/>
host element's class will == 'third'.

<some-element 
    [ngClass]="{'class1 class2 class3' : true}" 
    [ngClass.md]="{'class1' : false, 'class4 class5':true}"> 
</some-element>

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" used all mediaQuery activations except for 'xs' (mobile) where it is explicitly removed;

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