0

I am rending a svg file into my component with the help of innerHTML. My svg file have some property that are defined and set in my Component like width, height,etc. The content from Svg file are rendered into the component via innerHTML but property values are not rendered.

@Component({
    selector: 'my-svg',
    template: '<div [innerHTML]="svgContents"></div>'
})
    export class MySvgComponent implements onInit{ 

    @Input() text="testing model";
    public svgContents:any;

    constructor(private readonly httpClient: HttpClient) {}

    ngOnInit(): void {
          this.httpClient.get(path).subscribe((res) => 
          {        
            this.svgContents = this.sanitizer.bypassSecurityTrustHtml(res as string);
          ); //getting html string

               
    }

}

In Svg File

There is

<span>
{{text}}
<svg>*icon content*</svg>
</span>

The result is:

enter image description here

The property text is not being rendered

Edit1: The text property is just an example.I am using multiple properties in the component to set width height in svg that are not being rendered as well.

tbishnoi
  • 23
  • 5

1 Answers1

1

Move {{ text }} from svg to template:

@Component({
    selector: 'my-svg',
    template: '<div>
                 <span>
                   {{text}}
                   <div [innerHTML]="svgContents"></div>
                 </span>
               </div>'
})

It's because Angular can't interpret properties from an external file.

mwl
  • 1,448
  • 14
  • 18