I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11.
Here is what my component looks like:
@Component({
selector: 'my-icon',
template: `
<svg *ngIf="_iconClass" class="icon" [ngClass]=_iconClass
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="" attr.xlink:href="#{{ _iconClass }}" />
</svg>
`
})
export class MyIcon {
private _iconClass: string = '';
@Input() set iconClass(i: string) {
if ((i !== undefined) && (i.indexOf('.ico') > -1)) {
// remove .ico from iconname
this._iconClass = i.substr(0, i.length - 4);
} else {
this._iconClass = i;
}
}
Then, I'm using it in another component like this:
<my-icon iconClass="icon--user"></my-icon>
I haven't included all the code, but I hope you get the idea. When I checked in Developer tools, the <use xlink:href> tag is empty. I suspect that IE 11 may not recognize
attr.xlink:href="#{{ _iconClass }}"I can't seem to figure out the issue. Any help would be greatly appreciated.
Edit:
This error message is displayed in the console
EXCEPTION: TypeError: Unable to get property 'contains' of undefined or null reference in [_iconClass in MyIcon@1:9]
private validateIcon(): void {
if ((this._iconClass !== undefined) && (this._iconClass !== '') && (document.getElementById(this._iconClass) === null)) {
if (this._validateIconRunOnce) {
console.warn('Icon(' + this._iconClass + ') not found.');
this._iconClass = 'not-found';
} else {
// delay validate icon for 3s to wait until the iconlibrary is loaded
this._validateIconRunOnce = true;
setTimeout(() => this.validateIcon(), 3000);
}
}
}