import { Component , ElementRef , Input , OnInit , Renderer2 } from '@angular/core' ; import { SvgViewerService } from './svg-viewer.service' ; @ Component ( { selector : 'svg-viewer' , template : '<div class="svg-viewer" aria-hidden="true"></div>' , providers : [ SvgViewerService ] , } ) export class SvgViewerComponent implements OnInit { @ Input ( ) src : string ; @ Input ( ) scaleToContainer : boolean ; constructor ( private elementRef , private renderer , private svgViewerService ) { } ngOnInit ( ) { this . fetchAndInlineSvgContent ( this . src ) ; } private inlineSvgContent ( svg ) { const el = this . elementRef . nativeElement ; el . innerHTML = '' ; if ( this . scaleToContainer ) { this . renderer . setAttribute ( svg , 'width' , '100%' ) ; this . renderer . setAttribute ( svg , 'height' , '100%' ) ; this . renderer . setAttribute ( svg , 'preserveAspectRatio' , 'xMidYMid meet' ) ; } this . renderer . appendChild ( el , svg ) ; } private fetchAndInlineSvgContent ( path ) { this . svgViewerService . getSVG ( path ) . subscribe ( ( svgResponse ) => { this . inlineSvgContent ( svgResponse ) ; } ) ; } }