Angular [innerHTML] doesn't work properly

Question

I'm trying to bind html content to a div in my Angular 6 app but it doesn't work.

Here is the content:

let content = 'Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?'

Here is the html part:

<div class="content" [innerHTML]="content"></div>

Now only Hello is binded. I don't see the rest of the html content. The expected result is:

'Hello Nick Soja How are you ?'

What's wrong ?

did you try using ` instead of ' so that would be: let content = `Hello Nick Soja How are you ?` replace first and last single quote with ` — Nadhir Falta, Jan 29 '19 at 15:56

score 1 · Answer 1 · answered Jan 29 '19 at 15:42

1

You can't use angular directives inside the innerHTML input value, it expects valid HTML. So that HTML is stripped from the code.

The HTML string being converted to HTML by the innerHTML directive won't be compiled. So that also means you can't use things like databindings inside the HTML string.

answered Jan 29 '19 at 15:42

enf0rcer

545
2
11

Is there a workaroud to achieve or bypass this ? – Amadou Beye Jan 29 '19 at 15:46
1

The obvious workaround in this case would be to use `Nick Soja` – enf0rcer Jan 29 '19 at 15:57
So is there a way to intercept this a link and redirect with routerLink from component ? I don't want the page reload – Amadou Beye Jan 29 '19 at 16:49
No, because the static HTML doesnt have any communication with the angular framework. I didn't realize a full page refresh would happen using href. I suggest doing the following: `
{{content.prefix}}{{content.name}} {{content.suffix}}
` – enf0rcer Jan 29 '19 at 19:46
Of course you would have to define a object containing those properties. – enf0rcer Jan 29 '19 at 19:47

score 0 · Answer 2 · answered Jan 29 '19 at 15:37

0

Try to remove the routerLink directive. I believe it doesn't work because [innerHTML] cannot compile angular directives and components, only static HTML.

answered Jan 29 '19 at 15:37

Shahar

2,269
1
27
34

Is there a workaroud to achieve or bypass this ? – Amadou Beye Jan 29 '19 at 15:46
something like this maybe: In the component file: `let item = { link: ['/Soja'], name: 'Soja' };` And in the html template file: `
Hello {{item.name}} How are you ?
` This should keep the link and the name dynamic – Shahar Jan 29 '19 at 16:01

juazsh · Answer 3 · 2019-01-29T16:14:22.487

0

just use: tick (``) instead of single quotes ''

content = Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?;

or try this: define your link in .ts file

link = '/Soja'

and bind it to router link in your template file

<div class="content" > Hello <a routerLink="link">Nick Soja</a> How are you ? </div>

edited Jan 29 '19 at 16:14

answered Jan 29 '19 at 15:57

juazsh

11
3

That will help to show the rest of the string, but won't fix the routerLink problem. See my answer with explanation. – enf0rcer Jan 29 '19 at 15:59
@enf0rcer , you are correct. – juazsh Jan 29 '19 at 16:12

Angular [innerHTML] doesn't work properly

3 Answers3