1

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.

0

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

1 Comment

You can take the style from the string and inject it with a [NgStyle] if you want to have the style with it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.