As I know, in angular 1.x I can use $sce service to meet my requirment like this
myApp.filter('trustAsHTML', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
and in html file use like this
{{ htmlString || trustAsHTML }}
Does there has a service like $sce or some pipe or any method can be competent to do that in angularjs 2 version?
Simplest solution:
<div [innerHTML]="some_string"></div>
Where some_string can be html code, e.g: some_string = "<b>test</b>".
No pipes or anything needed. Supported by Angular 2.0
innerHTML. Like prop1_value prop2_value. Without creating any method to concat them.
span and added that prop value there.In angular2 there's no ng-include, trustAsHtml, ng-bind-html nor similar, so your best option is to bind to innerHtml. Obviously this let you open to all kind of attacks, so it's up to you to parse/escape the content and for that you can use pipes.
@Pipe({name: 'escapeHtml', pure: false})
class EscapeHtmlPipe implements PipeTransform {
transform(value: any, args: any[] = []) {
// Escape 'value' and return it
}
}
@Component({
selector: 'hello',
template: `<div [innerHTML]="myHtmlString | escapeHtml"></div>`,
pipes : [EscapeHtmlPipe]
})
export class Hello {
constructor() {
this.myHtmlString = "<b>This is some bold text</b>";
}
}
Here's a plnkr with a naive html escaping/parsing.
I hope it helps :)
[innerHTML]: stackoverflow.com/a/34424375/86937
I got Same Problem buy I Request the decode HTML from Backend and them you can inject html to your page
// YOUR TS
@Component({
selector: 'page',
templateUrl: 'page.html'
})
export class Page {
inject:any;
constructor( ) { }
ionViewDidLoad() {
this.inject='your HTML code'
}
}// YOU HTML PAGE
<div [innerHTML]="inject"></div>The best solution which can be of your help is as below:
<p [innerHTML]=your_response_which_is_string></p>
Hope it helps!!!
For property binding use below :
<div innerHtml="{{ property }}"></div>
For just a string :
<div [innerHtml]="<p>property</p>"></div>
