How [class] [attr] [style] directives work

Answer 1

_{The following code snippets are excerpted from the Angular.io docs.}

What you're referring to is the Binding target.

The first div is referencing Attribute binding.

    
One-Two

The second div is referencing Class binding.

The class binding is special


This one is not so special

However, it is recommended to use NgClass.

The last div is referencing Style binding. Believe it or not, the third div is actually legal (or at least in Angular).

Red
Save

However, it is recommended to use NgStyle instead.

So, in this case, it will bind the value of the variable to the element. (Except the class where it will evaluate whether the isDelightful variable is true.)

Here's a Stackblitz demo for you to play around with. :)