Angular – What is the meaning of brackets [] in the HTML template?

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

Example

The right-hand side of the assignment [ngClass]="classes" is a property, not a string.

component.ts

classes = "class-1 class-2 class-3";

component.html

<p [ngClass]="classes">Brackets demo</p>

// output
// <p class="class-1 class-2 class-3">Brackets demo</p>

• Share on Facebook