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.

How can i achieve this?

Pardeep Jain · Accepted Answer · 2018-12-12 07:27:10Z

6

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>

answered Dec 12, 2018 at 7:27

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Pappas · Accepted Answer · 2018-12-13 01:53:15Z

0

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()]
})

answered Dec 12, 2018 at 7:39

Alex Pappas

2,8073 gold badges32 silver badges63 bronze badges