What is the difference between class and [class] in angular html

Question

Looking for good practices about angular folder structure I stumble upon this piece of code:

content-layout.component.html:

<div [class]="theme">
  <div class="mat-app-background">
    <app-nav></app-nav>

      <div class="container">
        <router-outlet></router-outlet>
      </div>

    <app-footer></app-footer>
  </div>
</div>

As far as I understand, the class tag is used to bind this component HTML with a CSS class. But the square brackets caught my attention, is there any real difference between the [class] and class for css binding? I can't hit the correct search term/feature name to google it myself

Answer 1

the brackets [] indicate that the value is a property in your component, so instead of saying apply the class theme to the element, it will look for a property theme in your component and use whatever is stored in there.

class="theme" // apply class theme

    // Component
    public theme = 'theme';

    // HTML
    [class]="theme" // use what's stored in property "theme"

    or

    [class]="'theme'" // use string 'theme'