2

I am attempting to use a custom pipe to take in a int value and then return a material design icon based on that int.

HTML:

{{item.MetGoal | NumberToStatusSymbol}}

TypeScript/JS:

transform(value, args?) {
    switch (value){
        case '0':
            return $.parseHTML(`<i class="material-icons text-red">&#xE5C9;</i>;`);
        case '1':
            return $.parseHTML(`<i class="material-icons text-green">&#xE86C;</i>`);
        case '2':
            return $.parseHTML(`<i class="material-icons text-yellow">&#xE8B2;</i>`);
        default: break;
    }
}

However when the page loads its only showing [object HTMLElement] instead of the actual HTML element listed in the return.

Tekk_Know
  • 161
  • 2
  • 12

1 Answers1

1
<div [outerHTML]="item.MetGoal | NumberToStatusSymbol"

{{}} does string interpolation and adds the result as string. This doesn't seem to be what you want.

You might need to do some sanitization. See also In RC.1 some styles can't be added using binding syntax

case '0':
  return &#xE5C9;
...

with

<i class="material-icons">{{item.MetGoal | NumberToStatusSymbol}}</i>

might work, but then you have to use a different pipe for the text-xxx attribute.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • This seems close, however the MD icon doesn't seem to respond correctly. Instead of showing the icon it simply has the character text. – Tekk_Know Aug 22 '16 at 18:28
  • If MD icons are Angular components or directives this won't work (I haven't used Angular2 material myself) In this case you would need to create dynamic components like shown in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Aug 22 '16 at 18:31
  • Got it with the outerHTML attribute binding, thanks as usual Gunter. – Tekk_Know Aug 22 '16 at 18:33
  • 1
    The only odd thing is that with the switch applying the material design i tag with the included classes the color class (text-***) is added by the style isn't applied. – Tekk_Know Aug 22 '16 at 18:45
  • Hey Gunter, looks like one issue with this method is that the angular 2 attribute '_ngcontent***' is missing from the imported dom element. – Tekk_Know Aug 23 '16 at 14:55
  • 1
    I see. There is no way to get it applied to elements added dynamically. It might work with just passing the unicode value but not with passing the `` element. – Günter Zöchbauer Aug 23 '16 at 14:57