Text binding between input and span in Angular

Question

How can I bind input texts to span innerHTML in Angular6?

ts file

...
finance_fullname: string;
...

template file

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>

Pankaj Parkar · Accepted Answer · 2018-09-30T16:29:49.687

12

I can say most secure way would be innerText or textContent.

<span class="fullname" [textContent]="finance_fullname"></span>
<span class="fullname" [innerText]="finance_fullname"></span>

Even AngularJS were using textContent for one way binding. It only extract the model value and dump directly inside the specified html node. Even though if you pass html it will add that html as a text(decoded html) on the page.

Demo

innerHTML would also work for you, but it could be dangerous, as it will give a chance to inject malicious content on the page in form of html.

edited Sep 30 '18 at 16:29

answered Sep 30 '18 at 16:14

Pankaj Parkar

134,766
23
234
299

For more in-depth explanations for different html node element text properties: https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext Note that it is not recommended to use `innerHTML` unless you specifically intend to insert HTML and make the precautions to avoid an XSS attack – philip yoo Nov 30 '20 at 17:27

Sajeetharan · Answer 2 · 2018-09-30T16:15:01.727

4

You can do it in two ways

(i) You can use [innerHTML]

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" [innerHTML]="finance_fullname"></span>

STACKBLITZ DEMO

(ii) Just bind using the two way data binding

STACKBLITZ DEMO

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

edited Sep 30 '18 at 16:15

answered Sep 30 '18 at 16:08

Sajeetharan

216,225
63
350
396

[innerHTML] working as I expected, but the second one is not working, what is the reason? – brucelin Sep 30 '18 at 16:14
check the demo above – Sajeetharan Sep 30 '18 at 16:16
1

I checked the demo, it seems you didn't declare the variable in ts file but I declared, that is the reason? The demo is working perfect but not for me. – brucelin Sep 30 '18 at 16:30
2

yeah that would matter, in that case you use ngModelchange and reassign the value – Sajeetharan Sep 30 '18 at 16:32

score 4 · Answer 3 · answered Sep 30 '18 at 16:10

4

I don't know why you are reading from angularjs since you are working with angular 6. If you want double binding just do it like this.

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

answered Sep 30 '18 at 16:10

NoHoney_k1ll

251
3
12

1

It's a form? Because If you have many inputs you just put in your ts form:any = {} and then in your html [(ngModel)]="form.finance_fullname" and it should work – NoHoney_k1ll Sep 30 '18 at 16:16
1

I figured out this one, this wasn't working because I declared the variable "finance_fullname" in ts file, once I removed all the declared variables this also working fine. Thanks in advance. – brucelin Sep 30 '18 at 17:27

Text binding between input and span in Angular

3 Answers3