2

For the purposes of an application written in Angular 2, i need to include dynamics html contained in a variable, to a template. You can see the code here: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '{{name}}',
})
export class AppComponent  { name = '<h2>Angular</h2>'; }

However, the result is not what i want : 

<h2>Angular</h2>

I would like to know if there is a technique to include this variable for handle the tags as html.

Ps: i try this code : 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: ' <div innerHTML="name" ></div>',
})

export class AppComponent  { name = '<h2>Angular</h2>'; }

But it's not really what i want because i don't want that a div(or another tag) encapsulate the <h2>.

Sp0wnx
  • 23
  • 5
  • Dup of http://stackoverflow.com/questions/31548311/angular-2-html-binding. The solution is here : http://stackoverflow.com/a/41089093/2398593 – maxime1992 Feb 08 '17 at 13:49

1 Answers1

7

If you don't want to encapsulate the h2, you juste have to write:

<h2 [innerHTML]="name"></h2>

crdly.

PS: name is a variable, if you want to test it with a string try that:

<h2 [innerHTML]="'<b>my html code</b>'"></h2>
Jerry yong-busson
  • 86
  • 1
  • 3