How to bind data to label in angular2

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>
    

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

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

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.

Tags:

Angular