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?
Copyright Notice：Content Author:「Yona Appletree」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/48453514/angular-svg-matching-component-with-svg-elements