Include variable containing html in a template - angular2

Question

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> .

Answer 1

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>