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 ?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

The question is: "I would like to know how I can put variables inside a string and render it with Angular2 ?" It can also be done like this ( a very simple version):

<p>
<b><span>test - </span></b>
<span>{{variable[0]}}</span>
</p>

... next simple version:

// ???.component.ts

item = 'text - ' + this.variable[0];

// ???.component.html

<h1>
<span [innerHTML]="item"></span>
</h1>