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.