CODEWITHSUNDEEP
angularionic-framework
Jaber Alshami
Jaber Alshami

Reputation: 404

How to use Pipe in replace HTML markup?

How can use Pipe in replace function with HTML markup in Angular?

Angular HTML:

<ion-list class="item-autocom" *ngFor="let word of words">
    {{ word | replace }}
</ion-list>

Angular TS Pipe:

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

@Pipe({
  name: 'replace'
})
export class ReplacePipe implements PipeTransform {
  transform(value: any, args?: any): any {

    return value.replace('h', 'gi', '<b>$&</b>');

  }
}

This is the output:

<b>$&</b>allo

But I need:

hallo

Upvotes: 0

Views: 647

Answers (1)

yurzui
yurzui

Reputation: 214057

Try replacing

{{ word | replace }}

with

<i [outerHTML]="word | replace"></i>

so your text will be parsed as html.

Upvotes: 2

Related Questions