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

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

• javascript
• angular

• Dup of stackoverflow./questions/31548311/angular-2-html-binding. The solution is here : stackoverflow./a/41089093/2398593 – maxime1992 Commented Feb 8, 2017 at 13:49

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