vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts

   1 import { AfterContentChecked, AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
   2 import { isNullOrUndefined } from 'util';
   3
   4
   5 /*
   6           Temporary
   7   Changing svg color and size.
   8   color changing according to fill attribute
   9   size according to viewBox
  10 */
  11 @Directive({
  12   selector: '[svg-directive]'
  13 })
  14 export class SvgDirective implements AfterContentChecked {
  15   @Input('fill') fill: string = "black";
  16   @Input('widthViewBox') widthViewBox: string = null;
  17   @Input('heightViewBox') heightViewBox: string = null;
  18
  19   constructor(private elRef: ElementRef) {}
  20   ngAfterContentChecked(): void {
  21     if(this.elRef !== undefined && this.elRef.nativeElement.children !== undefined && this.elRef.nativeElement.children[0] !== undefined){
  22       this.elRef.nativeElement.children[0].children[1].children[0].style.fill = this.fill;
  23       if(this.elRef.nativeElement.children[0].children[1].children.length > 1){
  24         this.elRef.nativeElement.children[0].children[1].children[1].style.fill = this.fill;
  25         this.elRef.nativeElement.children[0].children[1].children[2].children[0].style.fill = this.fill;
  26       }
  27
  28       if(this.widthViewBox && this.heightViewBox){
  29         this.elRef.nativeElement.firstChild.setAttribute('viewBox', "1 1 " + this.widthViewBox + " " + this.heightViewBox)
  30       }
  31
  32     }
  33   }
  34 }