Two way binding issue in angular4

Question

I am not able to get the two way binding in angular4 working. Here is the component code.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-date-selector',
  templateUrl: './date-selector.component.html',
  styleUrls: ['./date-selector.component.css']
})
export class DateSelectorComponent implements OnInit {

  private statDate: Date;

  constructor() { }

  ngOnInit() {
    this.statDate = new Date()
  }

  goToPreviousDay(): void
  {
    console.log("previous day clicked");
    this.statDate.setDate(this.statDate.getDate() - 1);
    console.log(this.statDate);
  }

  goToNextDay(): void
  {
    console.log("next day clicked");
    this.statDate.setDate(this.statDate.getDate() + 1);
    console.log(this.statDate);
  }
}

I am referring to statDate in my partial like this.

<div>
    <a><span class="glyphicon glyphicon-chevron-left" (click)=goToPreviousDay()></span></a>
    <span class="text-center text-muted" [(innerText)]="statDate"></span>
    <a><span class="glyphicon glyphicon-chevron-right" (click)=goToNextDay()></span></a>
</div>

Console log shows that the statDate is getting updated, but the same is not getting reflected in the UI.

Now that you found an answer to your problem, you should accept the answer you find the most useful and relevant to this issue. — Adrien Brunelat, Jan 25 '18 at 14:09

Adrien Brunelat · Accepted Answer · 2018-01-25T09:58:14.233

0

Several issues to be pointed out.

Angular Binding

In your case, since we're talking about a span, all you need is one-way binding. There are several ways to do that in Angular.

The most common, readable and simple way to do this would be with an interpolation. Also you are trying to display a date, so you should use Angular's DatePipe like this:

<span>{{statDate | date}}</span>

That will pretty print your date with several variables to format it like you want.

HTML event binding syntax

Also your click event binding in HTML should look like this:

<span (click)="goToPreviousDay()"></span>

⇨ Note the " after the (click)=, it is pretty common for the Angular code to stop its execution on HTML/TS syntax typos and that would explain the lack of UI update.

Result

Combining all that is mentioned above, the resulting HTML would be:

<div>
  <a>
    <span class="glyphicon glyphicon-chevron-left" (click)="goToPreviousDay()"></span>
  </a>
  <span class="text-center text-muted">{{statDate | date}}</span>
  <a>
    <span class="glyphicon glyphicon-chevron-right" (click)="goToNextDay()"></span>
  </a>
</div>

edited Jan 25 '18 at 09:58

answered Jan 25 '18 at 09:27

Adrien Brunelat

4,492
4
29
42

Also I think if you want to bind to span's property, its name is innerHTML, not innerText. – Adrien Brunelat Jan 25 '18 at 09:28
I tried this earlier. Doesnt work. All I see in the UI is the initial date string and doesnt get changed with clicks. Tried with InnerHTML as well. – Shankar M Rudraiah Jan 25 '18 at 09:34
@ShankarMRudraiah huh. Interesting... Did you check the console for errors? – Adrien Brunelat Jan 25 '18 at 09:36
@ShankarMRudraiah, I noted something odd with your HTML code, please check my last edit (the thing about the `"`). – Adrien Brunelat Jan 25 '18 at 09:39
no errors in console. And added the quotes around fn calls as well. – Shankar M Rudraiah Jan 25 '18 at 09:44
I changed the {{statDate}} to {{statDate.toString()}} and it does change now:) Strange – Shankar M Rudraiah Jan 25 '18 at 09:46
@ShankarMRudraiah, did you try the date pipe instead? – Adrien Brunelat Jan 25 '18 at 09:47
No date pipe. just the toString() call. – Shankar M Rudraiah Jan 25 '18 at 09:50
@ShankarMRudraiah Ok, still I strongly recommend using the DatePipe instead. Check edit and linked Angular documentation. – Adrien Brunelat Jan 25 '18 at 09:52

score 0 · Answer 2 · answered Jan 25 '18 at 09:27

0

Instead of two-way binding, all you need here is one-way binding.

Change this:

<span class="text-center text-muted" [(innerText)]="statDate"></span>

to :

<span class="text-center text-muted" > {{ statDate }}</span>

answered Jan 25 '18 at 09:27

Faly

13,291
2
19
37

Two way binding issue in angular4

2 Answers2

Angular Binding

HTML event binding syntax

Result