Angular - how to bind angular variable to html and display

Question

I've a component and it has a ts file it contains html content as a variable.

para1= <a href="www.google.com">sitename</a> more content

I need to bind this paragraph in html like a html itself.

sitename

How can i achieve this?

Answer 1

Simply use innerHTML in case your variable value contains HTML template.

Like this -

para1= "<a href="www.google.com">sitename</a> more content"

In html file -

<span [innerHTML]='para1'></span>

Answer 2

You can use ngx-dynamic-template to achieve this.

In your example where para1= '<a href="www.google.com">sitename</a> . . .', you may have something like this:

<ng-template 
    dynamic-template
    [template]="para1"
>
</ng-template>

Don't forget your import:

import { NgxDynamicTemplateModule } from 'ngx-dynamic-template';

@NgModule({
    imports: [NgxDynamicTemplateModule.forRoot()]
})