Render Html from JSON without displaying content of style tag in Angular 4

Question

My JSON looks like this

{
    "product_details": {
        "description": "<style> img {width: 320px; height: auto;}</style>Apple iPhone 6 Gold , 128 GB New"
    }
}

and I have a component template that is something like this:

<div class="panel-body" [innerHTML]="product_detail.description"></div>

if I tried to render this in the browser it is displaying like this.

img {width: 320px; height: auto;} Apple iPhone 6 Gold , 128 GB New

above the content of a style tag should not be displayed.

Please Help me a way to get that working.

Answer 1

In Angular you can use a custom pipe to filter the product_detail.description

Here's a plunker of that method, implement it like so:

<div class="panel-body" [innerHTML]="product_detail.description | getUnstyledText"></div>

@Pipe({name: 'getUnstyledText'})
export class GetUnstyledTextPipe implements PipeTransform {
  transform(text: string): string {
    let splitArray = text.split('</style>');
    return splitArray[splitArray.length-1];
  }
}

The example above is implementing this plain JS, a split operation on the string to get the text you want:

var string = "<style> img {width: 320px; height: auto;}</style>Apple iPhone 6 Gold , 128 GB New";

var splitString = string.split('</style>')

console.log(splitString[splitString.length-1]);