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

Answer 1

With current versions of Angular 2+ you can use CSS Variables to achieve this as well as sanitizing your input.

In your style sheet define the rule using CSS Variables. A fallback can also be defined as CSS Variables aren't supported by IE. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

.featured-image:after { 
    content: '';
    // Fallback for IE
    background-image: url('fallback-img.png');
    background-image: var(--featured-image); 
}

Rather than bypassing security trust style, you can also sanitize your input with a reusable pipe: https://angular.io/api/platform-browser/DomSanitizer#sanitize

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
@Pipe({
    name: 'safeStyle',
})
export class SafeStylePipe implements PipeTransform {
    constructor(protected sanitizer: DomSanitizer) {}
    transform(value: string): SafeStyle {
        if (!value) return '';

        return this.sanitizer.sanitize(SecurityContext.STYLE, value);
    }
}

In your template: