Search code examples
cssangularangular-template

In angular, how to add a class using the brackets?

Is it possible to create something like below?

<div *ngFor="let post of posts">
  <p class="quote {{post.color}}-quote">
    {{ post.content }}
    <span class="author">Anatoly Weinstein, Founder of Theora</span>
  </p>
</div>

Important line: class="quote {{post.color}}-quote"

I've seen similar issues, but I don't want to use booleans and hardcode every element.

Solution

  • There is no special reason to use the template binding with brackets, this can be done with the ngClass directive:

    <p class="quote" [ngClass]="[post.color+'-quote']">