CODEWITHSUNDEEP
angularsvg
chris01
chris01

Reputation: 12321

Angular: component should produce parts of a SVG

An Angular component normally produces HTML. If I try to let them produce SVG it failes because it does not know the SVG tags. Seems it only knows them if the result is inside . But thats not the case here - is in the parent-component.

https://stackblitz.com/edit/angular-ivy-cbyf99?file=src/app/app.component.ts

My component should produce parts of a SVG. How can I make it work?

Upvotes: 1

Views: 244

Answers (1)

wlf
wlf

Reputation: 3393

Using SVG elements in child components

SVG elements, <circle>, <rect> etc will not be recognised on their own as there is no parent <svg> element. You can resolve this by prepending them with svg ie: <svg:circle> or <svg:rect>

Child component selector

You can't use a normal Angular component for the child, as it it inserts a corresponding element into the DOM which interferes with the SVG rendering (ie: <mycircle> below):

enter image description here

To address this, change the selector so it is enclosed in square brackets:

selector: '[mycircle]'

You can then use it like a directive and assign it to an svg <g> element in the parent:

<svg>
  <g mycircle />
</svg>

Stackblitz: https://stackblitz.com/edit/angular-ivy-qvnvwe?file=src%2Fapp%2Fapp.component.ts

Upvotes: 1

Related Questions