How do I store HTML element inside variable in angular and use it in html file-CodePudding

In my TS file I have declare variable as element and inside that written one paragraph tag with some text

element ='<p>Something written</p>';

I want to show this as paragraph in my html file.... I tried to achieve this using below way in my html file

{{element}}

But in html it is showing as it is with the (<p>,</p>) open and close tags

<p>Something written</p>

How can I achieve this?

CodePudding user response：

Please see the following example on Stackblitz.

Have a property in your component that contains HTML tags like below;

text: string = '<strong>Example of innerHTML in Angular.</strong>';

Refer to this property in your template (i.e. HTML file) as follows;

<p [innerHTML]="text"></p>