add directive inside file import svg with angular2

Question

I have a file svg imported, with Jquery and I would Like add directives:

$(seat).attr("myHighlight","");

this "myHighlight" is my directive was added dinamically using jquery my directive is:

import { Directive, ElementRef, Input } from '@angular/core';
declare var $:any;
@Directive({ 
  selector: '[myHighlight]' 
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    $(el.nativeElement).css("fill","red");
  }
}

now my component where I will use to this directive is

import { Component, OnInit, ViewChild,ElementRef, AfterViewInit } from 
'@angular/core';
import {Hero} from './hero';
import {HeroService} from './hero.service';

declare var $:any;

@Component({
  selector: 'my-heroes',
  template:
    <h2 myHighlight>My Heroes</h2>
    <div #contentForSvg>
    </div>
  providers:[HeroService],
})
export class HeroesComponent implements OnInit,AfterViewInit {
  @ViewChild('contentForSvg') contentForSvg : ElementRef;

  constructor(private heroservice:HeroService){}

  ngOnInit(): void {

  this.getHeroes();
    $('<div></div>').addClass('plano-map-image').load('/aecid.svg', 
    (index:any,svg:any)=> {
      $("svg > g").each((row_index:any, g:any)=> {
        $(g).attr('row-id',row_index);
        $(g,"> g").children().each((seat_index:any,seat:any)=> {
          //seat
          $(seat).attr("myHighlight","");
        });
      });
    }).appendTo(this.contentForSvg.nativeElement);
  }

  title='Tour of Heros'
  name = 'Windstorm';
  heroes:Hero[];
  selectedHero: Hero;

  getHeroes(): void{
    this.heroservice.getHeroesSlowly().then(
      heroes=> this.heroes=heroes
    );
  }

  onSelect(hero:Hero):void {
    this.selectedHero= hero;
  }

  onCulturalMap():void{
  }
}

I add attribute myHighlight to tag svg but it not is a directive because not exist in the template of Angular, it will be added after in the event onInit How would I do this, if I want it to be a directive