Change style of pseudo elements in angular2

Question

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2?

in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element.

I tried something like

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">

it didn't work. I also tried this

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">

Answer 1

You can achieve what you need with CSS variables.

In your style sheet you can set the background image like this:

.featured-image:after      { content: '';
                             background-image: var(--featured-image); 
                           }

After that you can programmatically set this variable on the same element or higher up in the DOM tree:

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}">

More about CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Note that the browser support is not complete yet.

Also note that you will need to sanitize the url/style using sanitizer.bypassSecurityTrustResourceUrl(path) or sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):