0

I am trying iterate over an array and create a DOM which is working fine but pipe is not working. I followed this example but this is also not working here.

Here is the json 

[{
  "question":"What is this in QUestiom?",
  "ans":"<strong> this </strong> is only question"

},{
  "question":"What is the output of following code ?",
  "ans":"vgvfvfg"
},{
  "question":"What is the output of following code ?",
  "ans":"fcfcff"
}]

HTML

  <div *ngFor="let ques of questionseries;let i =index" class="test">
  <div>
    <span [innerHTML]="ques.question | safeHTML"> </span>
  </div>
  <div>{{ques.ans}}</div>
</div>

Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
  name: 'safeHTML',
  pure:false
})
export class SafeHTMLPipe implements PipeTransform {
 constructor(private sanitizer:DomSanitizer){}
  transform(value: any, args?: any): any {
   console.log(value , args);
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
 }

Here is the working DEMO.My expectation is this will be inside strong but it is only correctly rendering.

brk
  • 48,835
  • 10
  • 56
  • 78

1 Answers1

3

That line needs to bind to innerHTML as well : 

  <div>{{ques.ans}}</div>

To be as follows: 

  <div [innerHTML]="ques.ans | safeHtml"></div>
abdullahkady
  • 1,051
  • 1
  • 8
  • 8