ng-bind equivalent in Angular

Question

I've used ng-bind in angularjs like this

<div ng-bind="getVal()"></div>

where getVal() return some value and it was in the controller. But In Angular2 , I have a function getVal() in the component and I need to call it from the template, in the same way like angular1.

I tried

<div [(ngModel)]="getVal()"></div>

But no luck, any idea?

Answer 1

Of course {{ getVal() }} will work as JB Nizet suggests when you want the returned value of your function to appear somewhere inline in the body of some HTML string. However, what you're actually after is...

Angular 1 Style:

<div ng-bind="getVal()"></div>

becomes...

Angular 2+ ng-bind equivalent:

<div [textContent]="getVal()"></div>

Angular 2+ ng-bind-html equivalent:

<div [innerHtml]="getVal()"></div>