0

I have a big paragraph coming from API request. Such as below screenshot. enter image description here

Those tags appear as it is. It doesn't transform into real HTML tags.

In Angular I am just using a simple code.

minister.component.html

<cdk-virtual-scroll-viewport itemSize="580" style="height:500px">
  <div *cdkVirtualFor="let data of allData">
    <a href="#{{data.Url_Page_Name}}">{{data.Minister_Name_English}}</a>
    <div>{{data.Ministry_Article}}</div>
  </div>
</cdk-virtual-scroll-viewport>

In browser I get same html tags in string format. How can I change that html tags string into html tags.

enter image description here

minister.component.ts

    import { Component, OnInit } from '@angular/core';
import { ApiReadService } from "../apiReadService.service";

@Component({
  selector: 'app-ministers',
  templateUrl: './ministers.component.html',
  styleUrls: ['./ministers.component.scss']
})
export class MinistersComponent implements OnInit {

  allData:Object = [];

  constructor(private apiRead: ApiReadService) {

  }
  ngOnInit(){
  this.apiRead.getData().subscribe(data=>{
            this.allData  = data.allMinisters;
    }); 
  }
}
Santosh
  • 3,477
  • 5
  • 37
  • 75
  • Thanks for the link. It worked well.. – Santosh Jan 10 '19 at 15:03
  • 1
    you're welcome, next time, if it happens again, please take a look at the "linked" section while you're writing the question. Luckily, your question is clear and well formatted, hence stackoverflow automatically finds similar topics. Beware: this is just purely informal, I marked as a duplicate because the linked question was actually quite similar to your, so keep in mind that, usually, while you're writing your question, the linked section may help you already :). – briosheje Jan 10 '19 at 15:41

1 Answers1

3

Try [innerHtml] directive in template:

<cdk-virtual-scroll-viewport itemSize="580" style="height:500px">
  <div *cdkVirtualFor="let data of allData">
    <a href="#{{data.Url_Page_Name}}">{{data.Minister_Name_English}}</a>
    <div [innerHtml]="data.Ministry_Article"></div>
</div>

Dmitry Myroshnychenko
  • 227
  • 1
  • 6