The @angular/flex-layoutngClass directive is a subclass of the @angular/commonngClass directive.

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.

For example:

<divclass="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 class0 class1 class2 assigned.
• When the xs breakpoint deactivates, then the div will only have the class0 name assigned.

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-elementngClass="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; but only for activated breakpoints.

• ngClass.<alias> ; where alias == xs | sm | md | etc.

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

See Plunkr Demo

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

See Plunkr Demo

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-elementngClass="first" [ngClass.xs]="{'first':false, 'third':true}"></some-element>