CODEWITHSUNDEEP
angularangular2-pipe
Tekk_Know
Tekk_Know

Reputation: 161

Angular 2 - Piping value and returning DOM element

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.

Upvotes: 2

Views: 2032

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

<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.

Upvotes: 1

Related Questions