Angular2 – Interpolate string with html

by

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

More Related Contents:

  1. Angular HTML binding
  2. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  3. Angular2: Cannot read property ‘name’ of undefined
  4. NgFor doesn’t update data with Pipe in Angular2
  5. How can I write data attributes using Angular?
  6. Angular2 multiple router-outlet in the same template
  7. OrderBy pipe issue
  8. Angular 2 Scroll to top on Route Change
  9. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  10. How to instantiate and apply directives programmatically?
  11. Angular 2 Read More Directive
  12. Angular2: How is ngfor expanded
  13. How to add “class” to host element?
  14. vs
  15. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  16. Angular 2 input parameters on root directive [duplicate]
  17. What is let-* in Angular 2 templates?
  18. How to truncate text in Angular2?
  19. Angular 2: How to write a for loop, not a foreach loop
  20. How to detect scroll to bottom of html element
  21. How to check the length of an Observable array
  22. How can I use ngFor to iterate over Typescript Enum as an array of strings
  23. Angular 2 disable sanitize
  24. Why angular 2 ngOnChanges not responding to input array push
  25. How to smooth scroll to page anchor in angular 4 without plugins properly?
  26. Angular firebase email verification false after verify
  27. How to correctly import operators from the `rxjs` package
  28. How to validate white spaces/empty spaces? [Angular 2]
  29. Style html,body from web component (Angular 2)
  30. How to send 1000 XHTTP Requests with maximum number of parallel requests

Leave a Comment