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