CODEWITHSUNDEEP
angularsvgangular2-template
Yona Appletree
Yona Appletree

Reputation: 9142

Angular svg matching component with svg elements

Consider the following component that matches <svg icon="close"></svg> for the purpose of displaying an icon:

@Component({
    selector: 'svg[icon]',
    template: `<use [attr.xlink:href]="'icons.svg#'+icon"></use>`
})
export class SvgIconComponent {
    @Input() icon: string;
}

This fails because Angular can't find the <use> element, as it is unaware that the content of the component is inside an <svg>. It would be nice if Angular would notice that the selector ensures this truth, but it does not.

The exact error is:

Uncaught Error: Template parse errors:
'use' is not a known element:
    1. If 'use' is an Angular component, then verify that it is part of this module.
    2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Obviously I could put the NO_ERRORS_SCHEMA on the module of the Component, but I'd prefer not to, since there are other components in the module, and because I want the unknown element error checking to work.

So, how can I tell Angular that it should treat the content of this particular component as being SVG content? If that's not possible, is there some other way to do this cleanly?

Upvotes: 4

Views: 2018

Answers (1)

Yona Appletree
Yona Appletree

Reputation: 9142

The solution is actually quite simple. Simply use the svg: namespace for elements in the component, like so:

<svg:use [attr.xlink:href]="'icons.svg#'+icon"></svg:use>

I ended up figuring that out on my own -- I'd love to know if there's good documentation about why and how this works somewhere.

Upvotes: 6

Related Questions