Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Say hello to Angular's future home!Check out Angular.devHome
/

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