grunticon angular

grunticon.directive.ts

import {Directive, ElementRef, Renderer2, AfterViewInit} from '@angular/core';
declare let window: CustomWindow;

@Directive({
    selector: '[appGrunticonEmbeded]'
})
export class GrunticonDirective implements AfterViewInit {

    constructor(private element: ElementRef, private renderer: Renderer2) {}


    ngAfterViewInit() {
        if( !window.grunticon ) {
            console.warn('No grunticon on window');
            return;
        }

        this.renderer.setProperty(this.element.nativeElement, 'background-image', 'none');
        this.renderer.setProperty(this.element.nativeElement, 'innerHTML', this.getSVG());

    }

    private getSVG(){
        return this.getDecodedBgImage().replace('data:image/svg+xml;charset=US-ASCII,', '');
    }

    private getDecodedBgImage(){
       return window.decodeURIComponent(this.getBackgroundImage());
    }

    private getBackgroundImage(){
       return window.getComputedStyle(this.element.nativeElement)
           .getPropertyValue('background-image')
           .slice(4, -1)
           .replace(/"/g, '');
    }
}
export interface CustomWindow extends Window {
    grunticon: any;
    decodeURIComponent;
}