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 ?
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
You can try following way,
variable=["Angular2","Angular1"];
constructor(){
this.testHTML = `<h1>test - ${this.variable[0]}</h1>`;
}
this.testHTML = <h1>test - ${this.variable[0]}</h1>; to be executed every time variable[0] changes.
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
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.
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>
"<h1>test - "+variable[0]+"</h1>";