Create dynamic HTML tags in angular 2 component

Question

I need to create an SVG tag in my component. Inside that SVG, I want to create unknown number of polygon components, like polygons, circles, rectangles, and so on. So, I have the data stored in array like:

polygons = [
    {
        type: 'polygon',
        points: "30,0 0,60 60,60"
    },{
        type: 'circle',
        x: 30,
        y: 30,
        r: 30
    }
    ...
]

This array is being created randomly, and it could have thousands of polygons. So how can we do this in angular 2? In react it was straight forward, but it seems in angular it is kind of tricky.

And one more question, are SVG tags are treated differently in Angular? or they are treated like all other HTML tags?

Any help will be appreciated...

yurzui · Accepted Answer · 2017-07-25 14:15:19Z

3

There are different ways to do that (ngIf, ngSwitch, ngTemplateOutlet, ngComponentOutlet, ...), but i would use the following trick

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <ng-container *ngFor="let item of polygons">
      {
        item.type,
        yurzui,
        polygon { <svg:polygon [attr.points]="item.points"/> }
        circle  { <svg:circle [attr.cx]="item.x" [attr.cy]="item.y" [attr.r]="item.r"/>/> }
      }
  </ng-container>
</svg>

Plunker Example

Are SVG tags are treated differently in Angular? or they are treated like all other HTML tags?

I think they are treated like all other HTML tags, but they should be inside svg tag directly otherwise we have to use namespace like in my example <svg:circle

edited Jul 25, 2017 at 14:15

answered Jul 12, 2017 at 14:53

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create dynamic HTML tags in angular 2 component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related