Вы должны установить данные в компоненте:
@Component({
selector: 'my-app',
template: '<div [innerHTML]="innerHTML"></div>',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
innerHTML: SafeHtml;
constructor(
private _cdr: ChangeDetectorRef,
private _sanitizer: DomSanitizer,
) {
// data from server
const { data, svg } = {
data: {
'301': 'some text',
},
svg: '<svg viewBox="0 0 500 80" xmlns="http://www.w3.org/2000/svg">\
<text x="10" y="20" >example: ${ data["301"] } count: ${ count }</text>\
</svg>',
};
let count = 0;
this._addSvg(data, svg, count);
setInterval(
() => {
count += 1;
this._addSvg(data, svg, count);
this._cdr.detectChanges();
},
3000,
)
}
private _addSvg(data: any, svg: string, count: number): void {
const evalSvg = eval('`' + svg + '`');
this.innerHTML = this._sanitizer.bypassSecurityTrustHtml(evalSvg);
}
}
Документация: Шаблонные литералы (Шаблонные строки)
из angular 8+ вы можете использовать svg в качестве шаблона:
svg.component.ts:
@Component({
selector: 'app-svg',
templateUrl: './svg.component.svg',
styleUrls: ['./svg.component.scss'],
})
export class SvgComponent {
@Input() textLine1: string;
@Input() textLine2: string;
}
svg.component.svg:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
...
<g>
<text ...>{{ textLine1 }}</text>
<text ...>{{ textLine2 }}</text>
</g>
</svg>
и реализация:
<app-svg
[testLine1]="data[301]"
[textLine2]="data['otherInput']"
></app-svg>