Angular 2 SVG not rendering

Question

I created a component to render SVG images that are within my app.

The are loaded dynamically as the however, my demo app just show a simpler version.

http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=info

i tried <div [innerHTML]="data"></div> and <div> {{ data }} </div>

The SVG is not being loaded though the call is correct. I spent sometime in gitter to find a solution but the closest i got was it it's being sanitzed.

The innerHTML i assume is being sanitzed and the interpolation is being ignored. It just shows the raw svg text.

Thanks

Günter Zöchbauer · Accepted Answer · 2020-11-19T11:05:20.063

17

Angular is sanitizing the content. To work around explicitly tell Angular that it can trust your HTML

import { Pipe, Sanitizer } from '@angular/core';

You can use a reusable pipe or call sanitizer.bypassSecurityTrustHtml(html) directly.

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

and use it like

[innerHTML]="data | safe"

Plunker example

See also In RC.1 some styles can't be added using binding syntax

edited Nov 19 '20 at 11:05

answered Nov 21 '16 at 18:50

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks one more thing before you go. If i wanted to style the svg through that component how could it be done? – Nico Nov 21 '16 at 19:55
I guess you mean http://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling/36265072#36265072 – Günter Zöchbauer Nov 21 '16 at 19:57
1

In newer versions of Angular you have to use `DomSanitizer` instead of `Sanitizer` to use this – Szkíta Nov 19 '20 at 10:48

score 2 · Answer 2 · answered Apr 09 '21 at 06:58

2

I would just like to add to Günter Zöchbauer's accepted answer, that in newer versions of Angular, we need to use DomSanitizer instead of Sanitizer, which can be imported using import { DomSanitizer } from '@angular/platform-browser';.

answered Apr 09 '21 at 06:58

Himanshu Patel

33
1
1
6

Angular 2 SVG not rendering

2 Answers2

Linked