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

3 Answers 3

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>