CODEWITHSUNDEEP
svgangular
Dunderdon
Dunderdon

Reputation: 151

Insert angular2 components in Svg

I recently started web dev. and angular2 in particular. I must say that this framework is fantastic!

But I have one challenge that I cant figure out how to solve in the best way:

I want to build my web app with angular2 (datamodels, common services etc.). But for the "main area screens" templates, I want to design in svg, drawing the static lines and circles etc with wysiwyg. Then I want to embed all my different angular components to these "main area screens" svg pages. This is because our layout is not typical grid style, and the different components need to be placed on "pixel precision" over the staic svg background.

I have searched the web for different approaches, but nothing seems to solve my challenge.

Is it possible to embed angular2 components inside svg, and then add the svg to an angular template?

Upvotes: 1

Views: 2271

Answers (2)

Yashwanth Kata
Yashwanth Kata

Reputation: 877

Yes it is possible to add the svg as angular 2 components :

you can try this.

defining your circle component

@Component({
    selector: 'g[circle]',
    templateUrl: './circle.component.html',
    styleUrls: ['./circle.component.scss']
})

circle.component.hmtl :

<svg:circle
            [attr.cx]="circle?.x" 
            [attr.cy]="circle?.y" 
            [attr.r]="radius" 

            [attr.fill]="circle?.fill"
             />

and your root html will be like 

<svg>
<g circle *ngFor="let circle of circles" 
                    [attr.fill-opacity]="opacity" 
                    [attr.transform]="scale" 
                    [circle]="circle"
                     />
</svg>

similarly you can use all the other svg shapes by creating similar components with selector as defied above.

You can use this library which provides all the svg elements

https://www.npmjs.com/package/angular-svg

Upvotes: 1

Yashwanth Kata
Yashwanth Kata

Reputation: 877

if you use an attribute selector for a SVG group, it will work, but I cannot seem to get the component as a custom element syntax that you are looking for to work.SVG does not have shadow DOM

For example, this works just fine:

@Component({
  selector: 'g[inner-svg]'
})

@View({
  template: `
    <text x="10" y="20">{{ text }}</text>
  `
})

export class InnerSvg {
  @Input() text: string;
}

<svg>
<g inner-svg text="This works"></g>
</svg>

Upvotes: 1

Related Questions