Angular2 - Interpolate string with html

Question

How to Interpolate string with html using angular2. i know in angular 1.x there is $interpolate(templateString)(miniScope); but i haven't find the same for angular2.

suppose i have a template like this : Hello my name is {{name}}

and binding is like name: "<strong>Pardeep</strong>"

so i want result like

Hello my name is Pardeep

Refer for angular1

for angular2 see here but i'm unable to understand clearly

any help ?

Answer 1

You can simply use [innerHTML] directive to accomplish it.

http://plnkr.co/edit/6x04QSKhqbDwPvdsLSL9?p=preview

import {Component, Pipe} from '@angular/core'  @Component({   selector: 'my-app',   template: `             Hello my name is <span [innerHTML]="myName"></span>    `, }) export class AppComponent {    myName='<strong>Pardeep</strong>';  } 

Update:

I checked it doesn't work this way after RC.1 release.

Let's say to make it work with RC.4 you can use DomSanitizationService as shown below,

@Component({   selector: 'my-app',    template: `     <div [innerHTML]="myCheckbox"></div>   `, }) export class AppComponent {    dangerousUrl='<input type="checkbox">';    constructor(sanitizer: DomSanitizationService) {      this.myCheckbox= sanitizer.bypassSecurityTrustHtml(this.dangerousUrl);   } } 

http://plnkr.co/edit/Yexm1Mf8B3FRhNch3EMz?p=preview