How to bind data to label in angular2

Question

Is it possible to bind data to a label using ngModel? I want to display data fetched from the database and display using labels and not input(textbox).

Answer 1

There are 3 options :

1. <label [value]="someValueExpression"/>
2. <label>{{ value}}</label>

3. when you are using form:

   <label for="name">Name</label>
   <input type="text" class="form-control" id="name" required>
   

Answer 2

ngModel works only for form's controls, which get input from the user. You need to use {{ }} syntax.

<label>{{ yourData }}</label>

Answer 3

One of the way to achieve two way data binding for the label control.

  <label for="name">{{name}}</label>

in your ts

export class MyComponent {
           name="Wick";    
      //one of the hrml controls calls this method
           somebodyCalledMe(){
          this.name="John Wick";
}

So now whenever the name property changes automatically the label's text will also change accordingly.

Answer 4

No, it's not possible. The ngModel only works for form's input controls. The label is not a form control.

You can bind other properties with [] i.e. the property binding.

<label [value]="expression"/>