innerHTML with variables angular2

Question

I would like to know how I can put variables inside a string and render it with Angular2 ?

Here is my code :

HTML :

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

The variable :

public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";

"variable" is an array of string, not null and containing at least 1 value.

And what I get displayed is :

test - {{ variable[0] }}

H1 is well rendered. but my variables are not interprated !

How can I solve this ?

Why don't you just create the testHTML like `"
test - "+variable[0]+"
";` — bergben, Feb 15 '17 at 16:27
because the idea would that that this string comes from a setting on a server.. — carndacier, Feb 15 '17 at 16:55
If you have that above question answer plz tell me @carndacier . I need it. It's a server response HTML file. that file show with variable values. — Jai Kumaresh, May 20 '19 at 10:38

score 5 · Answer 1 · edited May 23 '17 at 12:25

5

You can't have any Angular specific stuff in HTML added dynamically. They all work only work when added statically to a components template.

You can create components dynamically at runtime though and add such a component using ViewContainerRef.createComponent()

See also Equivalent of $compile in Angular 2

edited May 23 '17 at 12:25

Community

1
1

answered Feb 15 '17 at 16:23

Günter Zöchbauer

558,509
191
1,911
1,506

score 4 · Answer 2 · answered Feb 15 '17 at 16:31

4

You can try following way,

 variable=["Angular2","Angular1"];

 constructor(){
   this.testHTML = `<h1>test - ${this.variable[0]}</h1>`; 
 }

DEMO : https://plnkr.co/edit/sGTcVAym6jKjm8i7jQgb?p=preview

answered Feb 15 '17 at 16:31

micronyks

52,386
15
100
135

Just as note, this requires `this.testHTML = `
test - ${this.variable[0]}
`;` to be executed every time `variable[0]` changes. – Günter Zöchbauer Feb 15 '17 at 18:47
1

Yes. Then n then you can get updated value. It should be parsed at TS level. – micronyks Feb 16 '17 at 08:20

score 1 · Answer 3 · answered Mar 07 '19 at 17:01

I tested my solution in Angular 7.

To dynamically load the information from the server I did the following:

this.subscription = this.service.getDynamicHtml()
      .subscribe(innerHTML =>{
        this.innerHTML = <string>innerHTML;
      });

In the template I simply use

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

In my case the server returns all of the text, but in your case if only a variable needs to be updated when the subscription ends the screen will be refreshed.

See https://alligator.io/angular/innerhtml-binding-angular/ for more details

score 0 · Answer 4 · answered Feb 15 '17 at 19:49

Ok, so as my requirement is to get this string value an API, and so on, I don't know what it will be... I've put in place a simple parser, that I will update when new needs come in.

For those who might be interested in, here is the function for the following html : var test = "<h1>test - {{Contact.FirstName}}</h1>";:

  public retrieveValue(from: string) {

    var tmp = from.split("{{");
    for (var i = 0; i < tmp.length; i++) {

      var val = tmp[i].split("}}")[0];

      var toReplace = "{{" + val + "}}";

      var tmp1 = val.split(".");

      var final: any | string = this;
      for (var j = 0; j < tmp1.length; j++)
        final = final[tmp1[j]];

      var re = new RegExp(toReplace,"g");
      from = from.replace(re, final);
    }

    return from;
  }

this function doesn't work (yet) for array, but it can be extended pretty easily I think.

If this answer has at least 10 "useful" votes, I will mark it as the answer. otherwise Günter Zöchbauer's answer will be the one :)

Thanks for your help guys.

innerHTML with variables angular2

test - "+variable[0]+"

4 Answers4

test - ${this.variable[0]}