javascript - How to render a hyperlink in a component template in Angular 6? - Stack Overflow

admin管理员组

文章数量:1334704

I have an Angular 6 application where a ponent is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).

You can visit Stackblitz @ for a sample application that I created to explain the issue.

Expected message display:

Click here.

Actual message display:

Click <a href=''>here</a>

I have an Angular 6 application where a ponent is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).

You can visit Stackblitz @ https://stackblitz./edit/angular-jj5nms for a sample application that I created to explain the issue.

Expected message display:

Click here.

Actual message display:

Click <a href='http://www.google.'>here</a>

• javascript
• angular
• typescript
• angular6

Share Improve this question Follow edited Jul 30, 2018 at 5:24 Vini asked Jul 30, 2018 at 5:15 ViniVini 8,4191111 gold badges3838 silver badges5050 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If you want to render HTML, you need to bind to the innerHTML property of an element, for example:

<p [innerHTML]="message | async"></p>

Where message is your observable from the service.

Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content.

You can use innerHTML

In your ponent:

linkHtml = "Click <a href='http://www.google.'>here</a>"

In your template:

<div [innerHTML]="linkHtml"></div>

You can use like that: in your .ts file :

dummyLinkText: string = "Click <a href='https://www.google.'>here</a>";

and in your .html file:

<div [innerHTML]="dummyLinkText | translate"></div>

本文标签： javascriptHow to render a hyperlink in a component template in Angular 6Stack Overflow