SVG element not rendering properly inside *ngFor in Angular 2

Question

I am trying to change the icon inside depending on the condition in a table, When the items array is sorted on click, the icon is not rendered for the rows whose position has changed. the component html code is given below. On initial rendering the icons are coming properly, but it seems when the table is rendered on sort of item array, the svg ' shadow-root ' is not replaced properly based on the ' xlink:href ' value change(actually on the items array order change, the shadow-root element is not being generated by the ngFor ) .

<tr *ngFor="let item of items; let i = index" class="c-data_table__row">
<td class="u-txt--center">
                      <div class="c-data_table__metric--pri">{{item.type}}</div>
                      <div class="c-data_table__metric--sec"> <small class="c-data_table__metric__count" [ngClass]="{'is-pos' : item.type >= item.typePrev, 'is-neg' : item.type < item.typePrev}"> 
                        <svg *ngIf="item.type >= item.typePrev" class="nc-icon grid-10 outline stroke-3">
                          <use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/app-icons.svg#nc-icon-tail-up"></use>
                        </svg>
                        <svg *ngIf="item.type < item.typePrev" class="nc-icon grid-10 outline stroke-3">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/app-icons.svg#nc-icon-tail-down"></use>
                        </svg>{{getIncreaseRate(item.type,item.typePrev) | percent}}</small></div>
                    </td>
</tr>

Answer 1

• @Component({ selector: 'g[inner-svg]' }) @View({ template: <text x="10" y="20">{{ text }}</text> }) export class InnerSvg { @Input() text: string; }