Rendering SVG data using Angular 2

Question

I have an angular application that gets product information from a service and returns it in a json object. On the html template i want to display this SVG image on the page. I have tried a few different methods but I cant get any to render the image.

Method 1:

<div class="prodStruc" [innerHtml]="product?.StructureSVG" style="float:right">

This method only renders the text from the svg image

Method 2:

<div class="prodStruc" style="float:right">            
      {{product?.StructureSVG}}
    </div>

This method spits out all the svg tags and data as a massive string (as expected)

Can anyone point me in the right direction on how to do this..if it can be done?

Fabi · Accepted Answer · 2017-05-18 11:06:18Z

5

I just had the same problem. This is the solution:

import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

// inject DomSanitizer in constructor
private myImage: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
  this.myImage = sanitizer.bypassSecurityTrustHtml(product.StructureSVG);
}

<div class="prodStruc" [innerHtml]="myImage"> </div>

And then in your template:

answered May 18, 2017 at 11:06

Fabi

853 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Rendering SVG data using Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related