How to pass a class name in angular from component.ts to html SVG

Question

I'm using d3 to create charts and every chart has to have a unique id.

so I need to use something like:

<svg class="{{className}}"></svg>

className is defined in component.ts but this isn't working

it works when I hard code the value, but when I pass in the class name in the value it doesn't work

Answer 1

class="{{className}}" is not the right way to bind data into template in Angular 2 +. And open your console to see what error did you get.

You should read Angular Document: https://angular.io/api/common/NgClass .

use <svg [ngClass]="className"></svg> should work for you.

Checking this: Angular 2 add value to ngClass with interpolation if you want to learn more with ngClass and interpolation. Checking this: https://angular.io/guide/displaying-data to see how to use interpolation in a correct way.