htmlangulartypescriptsvgforeignobject

Need to change height of foreignObject inside svg

I need to change height of foreignObject in svg dynamically. I have to use foreignObject as I need html elements inside it. (I'm working with ngx-graph).

<foreignObject x="1" y="1" width="335" [height]="foreignObjHeight(node.Data.length)" class="{{ checkIfSourceNode(node) }}">
...
</foreignObject>

I'm getting error:

TypeError: Cannot set property height of [object SVGForeignObjectElement] which has only a getter

Please help!

Solution

  • In your case you can just set the height attribute to its value :

    <foreignObject x="1" y="1" width="335" [attr.height]="foreignObjHeight(node.Data.length)" ">