Skip to content

Instantly share code, notes, and snippets.

@braindroplabs

braindroplabs/app.component.html

Last active June 23, 2016 21:00
Show Gist options
  • Save braindroplabs/7febe68a395e9017ae0b4f798b9dcf64 to your computer and use it in GitHub Desktop.
Save braindroplabs/7febe68a395e9017ae0b4f798b9dcf64 to your computer and use it in GitHub Desktop.
Download ZIP
How is transclusion (content projection) done in Angular 2 when using SVG?
Raw
app.component.html
<my-custom-svg [width]="500" [height]="300">
<g my-custom-content-projected-svg [item]="item"></g>
</my-custom-svg>
Raw
my-custom-content-projected-svg.html
<svg:circle [attr.cx]="item.x" [attr.cy]="item.y" [attr.r]="item.r"></svg:circle>
Raw
my-custom-svg.component.html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" [attr.width]="width" [attr.height]="height">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" *ngFor="let item of items">
<ng-content></ng-content>
</svg>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment