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>

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>

• javascript
• angular
• typescript
• data-binding

3 Answers 3

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.

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>

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>