Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NgClass

Adds and removes CSS classes on an HTML element.

See more...

Exported from

Selectors

Properties

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

Description

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]="'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]="stringExp|arrayExp|objExp">...</some-element>

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

Methods

      
      ngDoCheck(): void
    
Parameters

There are no parameters.

Returns

void