CODEWITHSUNDEEP
javascriptangular
Sp0wnx
Sp0wnx

Reputation: 23

Include variable containing html in a template - angular2

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

Upvotes: 2

Views: 3069

Answers (1)

Jerry yong-busson
Jerry yong-busson

Reputation: 86

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>

Upvotes: 7

Related Questions