ngClass API

The ngClass directive is a subclass of Angular's ngClass with features to support class changes based on mediaQuery activations.

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>

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

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

Note that the default classes (specified by class="" and ngClass="..." will be preserved for other activations and merged those extra classes 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>