Angular 2 : Controlling SVG Image/Icon Css Styles Dynamically Through User Inputs/events On UI

I used Jquery to control the Css styles of svg image dynamically in Angular 2. 1: Control using events like mouse hover Below is a sample code for a simple circle .svg image with

Solution 1:

Just use the ngStyle directive

<circle [ngStyle]="{stroke:stroke, fill: fill}" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouseover)="func1()"/>

Just use the ngStyle directive

<circle [style.stroke]="stroke"
        [style.fill]="fill" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouseover)="func1()"/>

Try to avoid using jQuery with Angular2.