How to applay CSS .class from innerHTML - css

Question

I have pipe:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'spaning',
pure: false
})
export class SpanPipe implements PipeTransform
{
transform(value: string): string
{
return "<span class='mark'>xxx</div>"+value;
}
}
And use it like this:
<div [innerHTML]="movie.title| spaning"></div>
How to style .mark class in css? I want that xxx become red. I do not interested in workaround, class must be added in pipe, as above.
Answer is somehow related to
Angular 2 - innerHTML styling, but I can't find solution by myself.
If I just add style to my component where I use this pipe:
.mark{
color: red;
}
I get:
"WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss)."

Answer 1

[innerHTML] can not be used without DOMSanitizer provider or it will throw security error. You can use DOMSanitizer provider in your custom pipe to sanitize your HTML as shown below,
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer, SafeHtml } from '#angular/platform-browser'
#Pipe({
name: 'spaning',
pure: false
})
export class SpanPipe implements PipeTransform
{
constructor(private sanitized: DomSanitizer) {}
transform(value: string,color:any): SafeHtml{
return this.sanitized.bypassSecurityTrustHtml("<span class='mark' [ngStyle]="{'color':color}">xxx</div>"+value);
}
}
HTML
<div [innerHTML]="movie.title| spaning :'red'"></div>

Answer 2

https://plnkr.co/edit/p0hsn57WT9FfO6E6lRjL?p=info <- plunkr
Turn the view encapsulation mode for your component to 'None' for the hard-coded class to be work in the component
import { ViewEncapsulation } from '#angular/core'
in the decorator
selector: 'your-component',
encapsulation: ViewEncapsulation.None,
then sanitize the HTML in your pipe before returning it
export class SpanPipe implements PipeTransform
{
constructor(private sanitized: DomSanitizer) {}
transform(value: string): any {
return this.sanitized.bypassSecurityTrustHtml("<span class='mark'>xxx</div>"+value);
}
}

Answer 3

EDIT:
Sorry for that.. When you're inserting new html tags you must use DOMSanitizer.
I'm attaching plunker to show how to use it properly
https://plnkr.co/edit/vBnF9hPSpw46053FQ08G?p=preview
You can use ngStyle.
Pipes transform function get two parameters: 'value' and 'args':
export interface PipeTransform {
transform(value: any, ...args: any[]): any;
}
So you can pass your pipe arguments. In this case I'm passing the string 'red' (Witch could easily be a variable..) and use it inside the transform function.
.html:
<div [innerHTML]="movie.title| spaning :'red'"></div>
.ts
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({
name: 'spaning',
pure: false
})
export class SpanPipe implements PipeTransform
{
transform(value: string,color:any): string
{
return this.sanitizer.bypassSecurityTrustHtml("<span class='mark' style=color:"+color+">xxx "+value+"</div>");
}
}