How to apply Angular2 pipes to dynamic content?

Question

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?

Answer 1

Angular doesn't process content added by [innerHtml]="..." in any way. It's just passed to the browser as is.