如何在 angular 中以正确的格式显示富文本

Question

I am fetching some data from a strapi endpoint and displaying it to user. The data is a paragraph content. It is in the rich text format which means that when I display it on a page using a p tag, It displays it with all the rich text formats. ie "**" as bold and so on. How can I diplay this as it should be?

In the.ts file, `

//lets assume that datatservice is my service to get the data from strapi endpoint
import {dataservice} from './service'
//content will store the content being fetched
content:any;

constructor( private data:dataservice ){}

ngOnInit(){
this.getData();
}

getData():void{
 this.dataservice.getContent().subscribe((res)=>{
    this.content=res.attributes.content;
    //lets assume that content of the data being fetched is " **Hello** my name is Kelvin."
})
}

and I am displaying it in the html as

<div>
<p>{{content}}</p>
</div>

this is what is shown

**Hello** my name is kelvin

but need it to be shown like this

**Hello** my name is kelvin. (where the Hello is bold)

Answer 1

You need to either write your own component or find one on the inte.net (and use it via npm) that can format the input like that. Angular does not have native component or element like that.