Angular css selector for custom directive with optional attribute

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

Did you tried my below answer?

nitin9nair
– nitin9nair

2019-06-28 17:23:46 +00:00
Commented Jun 28, 2019 at 17:23 — nitin9nair
– nitin9nair, Commented Jun 28, 2019 at 17:23

nitin9nair · Accepted Answer · 2019-06-27 16:06:34Z

0

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

answered Jun 27, 2019 at 16:06

nitin9nair

5984 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

domen Over a year ago

@HostBinding decorator would be a better bet

Collectives™ on Stack Overflow

Angular css selector for custom directive with optional attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related