How set ngModel for span Angular 6?

Question

HTML5

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1" [(ngModel)]="data.val1"></span>
</div>

TS

data = {
 val1 = ''
}

Note: I need a unique name. I want to use the star rate system. I want to get name ONLY.

Answer 1

Approaches

Interpolation

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1">{{data.val1}}</span>
</div>

Property binding

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1" [innerHTML]="data.val1"></span>
</div>

When rendering data values as strings, there is no technical reason to prefer one form to the other. You lean toward readability, which tends to favor interpolation. You suggest establishing coding style rules and choosing the form that both conforms to the rules and feels most natural for the task at hand.

Note:

the Angular NgModel directive is a bridge that enables two-way binding to form elements.

Template syntax