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

Question

I examined ngStyle, ngClass directives here but I still couldn't understand how these work:

<div [attr.role]="myAriaRole">
<div [class.extra-sparkle]="isDelightful">
<div [style.width.px]="mySize">

Built-in directives don't select such an attribute: class.extra-sparkle. What kind of selector can select such html attribute? Which built-in directive handles this?

As far as I know html attributes with dot (style.width.px) are not legal already. Apparently the string withing square brackets don't passed directly as attributes. But where it is done? Which directive catches these notations?

Answer 1

You're right, these are not directives.

Angular compiler creates a view factory for each component with view nodes. For each view node the compiler defines a set of bindings types using the bitmask. There are different binding types and hence different types of operations performed during change detection to reflect changes in the component class.

You probably know about the standard input mechanism that allows updating the property:

<div [prop]="myAriaRole">

The compiler creates the TypeProperty binding for it:

TypeProperty = 1 << 3

and hence the operation to update the element property is used during change detection.

The special syntax attr.*, class.* and style.* defines different type of bindings:

TypeElementAttribute = 1 << 0,
TypeElementClass = 1 << 1,
TypeElementStyle = 1 << 2,

so during change detection for each type of binding corresponding operation is used:

function CheckAndUpdateElement() {
    ...
    case BindingFlags.TypeElementAttribute -> setElementAttribute
    case BindingFlags.TypeElementClass     -> setElementClass
    case BindingFlags.TypeElementStyle     -> setElementStyle
    case BindingFlags.TypeProperty         -> setElementProperty;

To learn about Angular internals related to view and bindings I strongly recommend reading:

• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular
• Here is why you will not find components inside Angular

Since all bindings are processed during change detection also read:

• Everything you need to know about change detection in Angular