Angular2 SVG xlink:href

Question

I have component for rendering SVG icon:

import {Component, Directive} from \'angular2/core\';
import {COMMON_DIRECT         


        

Answer 1

I think it can be solved using angular pipe feature.

Explanation This pipe will

1. Pass the parsed response value to the pipe
2. Return the complete svg path
3. attr.xlink:href= will get the expected path & svg will rendered in html page

here is pipe typescript code

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
    name: 'iconpipe'
})
export class IconPipe implements PipeTransform {
    constructor() { }

    transform(value: any) {
        let properIconName = undefined;

        switch (value) {
            case 'clear-day':
                properIconName = '/assets/images/weather-SVG-sprite.svg#sun';
                break;
            case 'clear-night':
                properIconName = '/assets/images/weather-SVG-sprite.svg#night-1';
                break;
            case 'partly-cloudy-day':
                properIconName = '/assets/images/weather-SVG-sprite.svg#cloudy';
                break;

            case 'partly-cloudy-night':
                properIconName = '/assets/images/weather-SVG-sprite.svg#night';
                break;

            case 'cloudy':
                properIconName = '/assets/images/weather-SVG-sprite.svg#cloud';
                break;

            case 'rain':
                properIconName = '/assets/images/weather-SVG-sprite.svg#rain';
                break;

            case 'sleet':
                properIconName = '/assets/images/weather-SVG-sprite.svg#snowflake';
                break;
            case 'snow':
                properIconName = '/assets/images/weather-SVG-sprite.svg#snowing';
                break;

            case 'wind':
                properIconName = '/assets/images/weather-SVG-sprite.svg#storm';
                break;
            case 'fog':
                properIconName = '/assets/images/weather-SVG-sprite.svg#sun';
                break;
            case 'humid':
                properIconName = '/assets/images/weather-SVG-sprite.svg#sun';
                break;
            default:
                properIconName = '/assets/images/weather-SVG-sprite.svg#summer';
        }
        return properIconName;
    }
}