Home > Back-end >  Angular's source code : [style.xxx] documentation
Angular's source code : [style.xxx] documentation

Time:11-17

I am trying to find the source code for the style directive, that is used like this :

<div [style.background-color]="'red'"></div>

Since it's usable when using CommonModule and it's a directive, I tried going into the corresponding package, but didn't thing anything related to it.

Would you happen to know where I can find the documentation for it ?

For information, I would like to find its source code to know how the selector works, so that I can reproduce it for custom directives. If you instead know how to do that, I'll take it instead !

I tried making a custom directive that accepts a syntax like this

<div [myDir.xxx]="1"></div>
<div [myDir.yyy]="2"></div>

But the selector would look like this

{
  selector: '[myDir.xxx],[myDir.yyy]'
}

And I don't want to add EVERY combination to my selector, rather a mask or something.

CodePudding user response:

[style] and [class] are not directives. They are property bindings, and those bindings are then handled by the renderer directly without any directives in between.

I haven't ever dug deep enough into the topic to find everything related to it, but parts of the relevant code are here and here.

That said, as per docs, there is no way to actually use a wildcard in the css selector of the directive / component. So you're stuck with either providing finite amount of attributes in the selector (as you already do) or passing an object as the value, e.g. [myDir]="{xxx: 1, yyy: 2}".

  • Related