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 ?

Liam · Accepted Answer · 2020-05-12 09:38:23Z

55

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

edited May 12, 2020 at 9:38

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jul 9, 2016 at 7:55

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pardeep Jain Over a year ago

i know, and what in case of if myName='<input type="checkbox">'; ?

micronyks Over a year ago

Check now it works with DomSanitizationService API.

Thibs Over a year ago

innerHTML still works and you don't want to trust html unless you really really have too... Look at the documentation under 'Content Security' angular.io/docs/ts/latest/guide/…

Collectives™ on Stack Overflow

Angular2 - Interpolate string with html

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related