I need to apply a Pipe (transformation) to format dynamic content provided via an API. The data is actually being applied via a custom formatter that essentially binds to [innerHTML] on an element. The problem is the pipe I append does not apply, as required.
For example, I'm receiving the following value AB123456D (UK, National Insurance No) and I want to display it like so AB 12 34 45 D
Restrictions imposed upon me are that data is formatted and inserted to the template via bindings using [innerHTML].
// template
<span *ngSwitchWhen="'html'" [innerHTML]="display"></span>
// helper function
display(): string {
...
return this.column.formatter.replace(/\{([^}]*)\}/g, (match, id) => _.get(this.data, id));
...
}
// formatter looks like this and my pipe's name is `ni`
<div>{niNum} | ni</div>
When rendered, I see the following...
AB123456D | ni
when I want / expect to see...
AB 12 34 45 D
Any ideas how this can be achieved, or whether it's even possible?
