How to render angular variables using innerHTML - Angular2

Question

In my application their is some text which is coming from a constant file which is declared like this:

  export const EmpStrings = {
    data:  "Welcome {{employee.name}}"
  }

And In my component file there is an object called employee.

   public employee = { name: 'xyz', dept: 'EE' }

Now In my HTML I want to use it like this:

<div class='e-data' [innerHTML] = "EmpStrings.data"></div>

But this didn't seems to be working. I tried various variations:

[inner-html] = "EmpStrings.data"
[innerHTML] = {{EmpStrings.data}}
[innerHTML] = "{{EmpStrings.data}}"

But none of them seems to be working.

@Vega yes I already tried all the possible ways listed there. — Rahul, Jul 21 '17 at 09:39
You need to use `JitCompiler` if you want to have binding within string. For example https://stackoverflow.com/questions/39410355/how-to-use-variable-to-define-templateurl-in-angular2 or https://stackoverflow.com/questions/40060498/angular-2-1-0-create-child-component-on-the-fly-dynamically/40080290#40080290 — yurzui, Jul 21 '17 at 09:40

score 3 · Accepted Answer · answered Jul 21 '17 at 10:22

3

If you don't want to use JitCompiler then you can parse string yourself

component.ts

ngOnInit() {
  this.html = EmpStrings.data.replace(/{{([^}}]+)?}}/g, ($1, $2) => 
      $2.split('.').reduce((p, c) => p ? p[c] : '', this));
}

template

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

Plunker Example

answered Jul 21 '17 at 10:22

yurzui

205,937
32
433
399

Is there a way to do this more generically through one of Angular's existing constructs, like a directive or pipe? – Danny Bullis Sep 19 '21 at 18:30

score 2 · Answer 2 · answered Jul 21 '17 at 09:39

2

use ${employee.name} to bind angular variable to innerHTML

"data": `Welcome ${employee.name}`

answered Jul 21 '17 at 09:39

Sachila Ranawaka

39,756
7
56
80

If I use `${employee.name}` then I am getting error message that emloyee is not defined in constant file – Rahul Jul 21 '17 at 09:44
post the employee object – Sachila Ranawaka Jul 21 '17 at 09:45
use `this.employee.name` – Sachila Ranawaka Jul 21 '17 at 09:49
why are you trying to add angular variable to constant – Sachila Ranawaka Jul 21 '17 at 09:54
I need parse some long strings and then add some content via vairables. And in constant file I have declared this like: message: "Hello mr. employee.name" And then any controller which wants to use can use it via message. – Rahul Jul 21 '17 at 09:57
How about cutting "Hello mr. employee.name" in two parts and doing {{string1}}{{string2}} with string1="Hello" and string2="employee.name". It's not a universal solution but a shorcut – Vega Jul 21 '17 at 10:00

Rex · Answer 3 · 2017-07-21T10:14:51.220

Angular doesn't interpolate strings like this, as far as I know one of the reason is security. The const doesn't have the context where your employee is in hence you see the error saying employee is not defined.

You could do this:

Change your constant:

export const EmpStrings = {data:  "Welcome "};

then:

<div class='e-data'>{{EmpStrings.data}}{{employee.name}}</div>

But if for some reason you must use [innerHTML]:

In your component class, add a method:

getWelcomeMessage(){return EmpStrings.data + this.employee.name;}
in the component view:

<div class='e-data' [innerHTML] = "getWelcomeMessage()"></div>

How to render angular variables using innerHTML - Angular2

3 Answers3

Linked