[Angular] Modificar: antes /: después de valor de Javascirpt

Digamos que queremos cambiar dynamiclly cierto estilo de: before o: after elemento.

No podemos utilizar NgStyle, que doesn de este caso de uso, lo que podemos hacer:

El uso de variables CSS + setProperty

importación {Componente, RefElement, ViewChild} de '@ angular / núcleo'; 

@Component ({ 
  selector: 'mi aplicación', 
  plantilla: ` 
    < p #ref > 
      empezar a editar para ver un poco de magia suceda :) 
    </ p > 
  ', 
  estilos: [` 
      : host { 
        -color: blue; 
      } 
      P { 
        font-family: Lato; 
        color: green 
      } 
      P: Antes de { 
        contenido: 'contenido de: antes'; 
        Color: var (- color); 
      } 
  `] 
}) 
Clase de exportación AppComponent { 
  @ViewChild ( 'ref') p: RefElement

  ngOnInit () { 
    this.p.nativeElement. style.setProperty ( '-color', 'Red') 
  } 
}