Angular 2, interpolation HTML

Question

I am creating a pipe:

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

@Pipe({
    name: 'highlight'
})
export class HighlightPipe implements PipeTransform {
    transform(value: any, args: string): any {
        let s = value + '';
        let startIdx = s.toLowerCase().indexOf(args.toLowerCase());
        let tokenLen = args.length;

        if (startIdx >= 0 && tokenLen > 0) {
            s = s.substring(0, startIdx) + '<strong>' + s.substring(startIdx, startIdx + tokenLen) + '</strong>' + s.substring(startIdx + tokenLen);
        }
        return s;
    }
}

To use like this:

<p>{{ result | highlight : search}}</p>

So if the result is 'Alabama' and my search is 'ba', I want this:

Alabama

But I get the html tag:

Ala<strong>ba</strong>ma

How to solve this?

Answer 1

You pipe should return

<strong>${content}</strong>

See more details How to allow html in return of angular2 pipe