What I want to happen is provide a value to a pipe, and let the pipe turn it into a list. This might not be the best way to go about it but it's the first thing that came to mind.

Basically I have a simple table. And I have my template as such

```
<tr *ngFor="let res of results">
    <td>{{res.value1}}</td>
    <td>{{res.value2 | list}}</td>
</tr>

```

My `list` pipe is as such.

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

```
@Pipe({
    name: 'list'
})
export class ListPipe implements PipeTransform {
    transform(value: string, args?: any): any {
        let newList: string[];
        newList = value.split(',');
        let output = '&lt;ul&gt;';
        newList.forEach(val => {
            output += `&lt;li&gt;${val}&lt;/li&gt;`;
        });
        output += '&lt;/ul&gt;';
        return output;
    }
}

```

My expected result would be something like

```
<tr>
    <td>value 1</td>
    <td>
        <ul><li>value2.a</li><li>value2.b</li></ul>
    </td>
</tr>

```

But what's happening is the literal values `<ul><li>value2.a</li><li>value2.b</li></ul>` are being rendered in my page.

What am I doing wrong?