How to applay CSS .class from innerHTML

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)."

you're using a Pipe in a place where a Component would suit perfectly... — Hitmands, Aug 27 '17 at 11:43
Yes, probably you have right. And probably I will end up using component here, now I want to try by my way. — Sonny D, Aug 27 '17 at 12:02
@fatman I edit my question to notify everyone why simple approach doesn't work. — Sonny D, Aug 27 '17 at 12:17

score 3 · Accepted Answer · edited Aug 27 '17 at 12:28

[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>

Congratulations, works in 100%. Just change types to SafeHtml, and import it. — Sonny D, Aug 27 '17 at 12:20

diopside · Answer 2 · 2017-08-27T12:27:15.070

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); 
    }
}

edited Aug 27 '17 at 12:27

answered Aug 27 '17 at 12:23

diopside

2,981
11
23

Work in 100%, but have drawbacks with leaking css style out of component. Anyway problem solved, thanks for answer. – Sonny D Aug 27 '17 at 12:27
Its the only way to apply a component class to injected HTML without using the renderer :P – diopside Aug 27 '17 at 12:28
Just make the styles very unique... class name - mark0381832080dj1 :) – diopside Aug 27 '17 at 12:31

Gili Yaniv · Answer 3 · 2017-08-27T12:54:07.053

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>");
    }
}

It works for you? I get "WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss)." — Sonny D, Aug 27 '17 at 12:00

How to applay CSS .class from innerHTML

3 Answers3