CODEWITHSUNDEEP
cssangularcss-selectorsangular-directive
Daniel
Daniel

Reputation: 1033

Angular css selector for custom directive with optional attribute

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

Upvotes: 1

Views: 678

Answers (1)

nitin9nair
nitin9nair

Reputation: 598

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

Upvotes: 0

Related Questions