Angular HTML binding not working

Question

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.

abdullahkady · Accepted Answer · 2018-08-15 10:21:01Z

3

That line needs to bind to innerHTML as well :

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

To be as follows:

  <div [innerHTML]="ques.ans | safeHtml"></div>

answered Aug 15, 2018 at 10:21

abdullahkady

1,0711 gold badge8 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brk Over a year ago

oops you are right. I missed the very basic. I will accept it as answer

Collectives™ on Stack Overflow

Angular HTML binding not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related