How to display rich Text in it's right format in 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.