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?

That is not two-way binding. You can just use `{{ getVal() }}` — JB Nizet, Jan 14 '16 at 08:10
Ah yes, it's not two way binding,my mistake, but imagine if I have a instead of — Mark Timothy, Jan 14 '16 at 08:12
Possible duplicate of [angular 2 html binding](http://stackoverflow.com/questions/31548311/angular-2-html-binding) — Fiddles, Jul 13 '16 at 06:44

luvaas · Accepted Answer · 2019-01-18T00:27:52.967

79

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>

edited Jan 18 '19 at 00:27

answered Sep 19 '16 at 22:02

luvaas

2,156
1
18
14

33

It should be `
` for **ng-bind** `
` for **ng-bind-html** – Jamie Pate Jun 01 '17 at 00:40
Should @JamiePate's comment not be integrated with the answer? ng-bind is not the same as [innerHtml]... – toxaq Jan 16 '19 at 01:17
2

@toxaq, I integrated the additions. – luvaas Jan 18 '19 at 00:29

ng-bind equivalent in Angular

1 Answers1

Linked