Murhaf Sousli February 2016

Change style of pseudo elements in angular2

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] + ' )}}'">

Answers


dfsq February 2016

No it's not possible. It is actually not an Angular issue: pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them.

Usual approach if you want to deal with pseudo elements programmatically is indirect: you add/remove/change class and in CSS make this class affect corresponding pseudo-element. So in your case you could have one more class that changes necessary style:

.blur:before {/* some styles */}
.blur.background:before {/* set background */}

Not all you need to do is to toggle .background class on the element when you need before pseudo-element to get a background. You can use NgClass, for example.

Post Status

Asked in February 2016
Viewed 2,024 times
Voted 9
Answered 1 times

Search




Leave an answer