具有可选属性的自定义指令的角度CSS选择器

Question

Lets say I created a custom directive who's selector is [myCustomDirective] , this directive has optional input parameter. So it may be used like:

<div myCustomDirective></div>

or

<div [myCustomDirective]="someBooleanFromController"></div>

Meanwhile, inside my directive controller I add pseudo class to elementRef on which directive is applied.

My question is how my css selector for the directive should look like to be applied no matter if I provide optional attribute for directive or not. I tried to use selector like so:

[myCustomDirective]:pseudoClassName { 
   // ... some css
}

It did the trick when myCustomDirective is used without parameter, but it doesn't work in cases when parameter is provided for myCustomDirective .

I also tried selector like this:

[myCustomDirective="true"]:pseudoClassName { 
   // ... some css
}

But it didn't work

Answer 1

Try the below code:

HTML

app.component.html

<p [appBetterHighlight]="'Yellow'">Highlight with App better directive</p>

CSS

style.css

 p[ng-reflect-app-better-highlight] {
    color: blue !important;
 }

Here's how the html in interpreted in browser tool

<p _ngcontent-c4="" ng-reflect-app-better-highlight="Yellow" style="">Highlight with 
 App better directive</p>

The best way to add a CSS to a particular custom directive it to access it in CSS like below:

p[ng-reflect-{custom directive name}] { 
    // css here
}

stackblitz demo