angular2 pseudo selector styling

Question

Can I style Pseudo Selector using Angular2.

<section class="inner_content person_content backdrop poster"  *ngIf="personAllMoviesArray.length > 0">
    <div class="personFavouritePoster"></div>
    <div class="single_column_medium">
        {{id}}
    </div>
</section>

CSS is

section.inner_content.backdrop:before {

background-image: url('https://image.tmdb.org/t/p/w1440_and_h405_bestv2/fBFPLjqiLTDW3GWgWIRkhHTwAcb.jpg');}

Answer 1

you can define a css-class like

.has-before:before {
   background-image: url('https://image.tmdb.org/t/p/w1440_and_h405_bestv2/fBFPLjqiLTDW3GWgWIRkhHTwAcb.jpg');
}

and add toggle the class via some toggle variable

<section [class.has-before]="toggleVariable"
         class="inner_content person_content backdrop poster" 
         *ngIf="personAllMoviesArray.length > 0">
     <div class="personFavouritePoster"></div>
     div class="single_column_medium">
         {{id}}
     </div>
</section>