{ "id": "api/common/NgClass", "title": "NgClass", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgClasslink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Adds and removes CSS classes on an HTML element.

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input('class')
klass: string\n 		Write-Only\n \n \n \n
\n \n @Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }\n 		Write-Only\n \n \n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

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

\n
    \n
  • string - the CSS classes listed in the string (space delimited) are added,
    • \n
  • Array - the CSS classes declared as Array elements are added,
    • \n
  • Object - keys are CSS classes that get added when the expression given in the value\nevaluates to a truthy value, otherwise they are removed.
    • \n
\n\n \n <some-element [ngClass]=\"'first second'\">...</some-element>\n\n <some-element [ngClass]=\"['first', 'second']\">...</some-element>\n\n <some-element [ngClass]=\"{'first': true, 'second': true, 'third': false}\">...</some-element>\n\n <some-element [ngClass]=\"stringExp|arrayExp|objExp\">...</some-element>\n\n <some-element [ngClass]=\"{'class1 class2 class3' : true}\">...</some-element>\n\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngDoCheck()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngDoCheck()\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }