Change style of pseudo elements in angular2

by

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 + ')')):

More Related Contents:

  1. In RC.1 some styles can’t be added using binding syntax
  2. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. Why do the :before and :after pseudo-elements require a ‘content’ property?
  5. How to style child components from parent component’s CSS file?
  6. CSS :after not adding content to certain elements
  7. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  8. What is the difference between a pseudo-class and a pseudo-element in CSS?
  9. Font Awesome 5, why is CSS content not showing?
  10. How and where to use ::ng-deep?
  11. Can I change the height of an image in CSS :before/:after pseudo-elements?
  12. Is there a way to use SVG as content in a pseudo element ::before or ::after
  13. Can I target a :before or :after pseudo-element with a sibling combinator?
  14. Should I use single or double colon notation for pseudo-elements?
  15. angular 2 ngIf and CSS transition/animation
  16. Combine :after with :hover
  17. ::before pseudo-element stacking order issue
  18. CSS3 ::selection behaves differently in FF & Chrome
  19. Dynamic styleUrls in angular 2?
  20. Styling mat-select in Angular Material
  21. Nesting pseudo-elements inside pseudo-elements
  22. css rotate a pseudo :after or :before content:”” [duplicate]
  23. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  24. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  25. prevent a pseudo element from triggering hover?
  26. Purpose of *:before, *:after rule without content property
  27. Apply webkit scrollbar style to specified element
  28. CSS3 transitions on pseudo-elements (:after, :before) not working?
  29. Grid Styling – Overwrite style of ag-grid
  30. Dynamically updating css in Angular 2

Leave a Comment