How to allow html in return of angular2 pipe?

by

Use bindings to innerHTML or outerHTML to render already escaped html. For example <span [innerHTML]="someString | toHtmlPipe"></span>. See this plunk:

@Pipe({
  name: 'wrapBold'
})
class WrapBold {
  transform(content) {
    return `<b>${content}</b>`;
  }
}

@Component({
  selector: 'my-app',
  pipes: [WrapBold],
  template: `
    <div>
      Hello <span [outerHTML]="content | wrapBold"></span>
    </div>
  `
})
export class App {
  constructor() {
    this.content="Angular2"
  }
}

More Related Contents:

  1. Using Pipes within ngModel on INPUT Elements in Angular
  2. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  3. Filtering an array in angular2
  4. load .profile with proc_open()
  5. What are the parameters for the number Pipe – Angular 2
  6. How to declare a pipe globally to use in different modules?
  7. What is the proper use of an EventEmitter?
  8. JS : Convert Array of Strings to Array of Objects
  9. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  10. Angular ReactiveForms: Producing an array of checkbox values?
  11. How can I get a list of all open named pipes in Windows?
  12. Queries scale with the size of your result set, not the size of your data set
  13. Avoid Angular2 to systematically submit form on button click
  14. Angular2: how bind to select multiple
  15. What are the differences between R’s new native pipe `|>` and the magrittr pipe `%>%`?
  16. Angular subscribe elegant
  17. Angularjs2 – preload server configuration before the application starts [duplicate]
  18. How to allow access outside localhost
  19. How to check if Angular application running in Production or Development mode
  20. Scroll to element on click in Angular 4
  21. What is the meaning of question mark in expressions in Angular 2?
  22. How to solve the circular dependency
  23. Angular 2 ngModel in child component updates parent component property
  24. What is the lifecycle of a service in Angular 5
  25. Conditionally apply click event in Angular 4
  26. How can I disable or hide the scrollbar within an Ionic 2
  27. Firestore Error: The query requires an index
  28. How to detect firestore connection failure
  29. How to place a dynamic component in a container
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment