CODEWITHSUNDEEP
javascriptangulartypescriptdata-binding
brucelin
brucelin

Reputation: 1021

Text binding between input and span in Angular

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>

Upvotes: 4

Views: 22100

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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.

Upvotes: 12

Sajeetharan
Sajeetharan

Reputation: 222712

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>

Upvotes: 4

NoHoney_k1ll
NoHoney_k1ll

Reputation: 251

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>

Upvotes: 4

Related Questions