30 seconds of angular
Star
✨✨ New to Angular? Check out interactive Angular Codelab ✨✨

SVG

It is possible to use SVG tags in your Angular component, to create beautiful graphs and visualizations. There are 3 things you need to know:

  1. When binding an SVG attribute, use attr
<circle [attr.cx]="x" [attr.cy]="y"></circle>
    
  1. When creating sub-components, use attribute and not tag selector:
// Not: <child-component></child-component>
    <g child-component></g>
    
@Component({selector: '[child-component]' })
    
  1. When using SVG tags in sub-components use svg prefix:
@Component({
      selector: '[child-component]',
      template: `<svg:circle></svg:circle>`
    })