title: Update View from Click in Angular
body: <p>I am trying to update a date dynamically from a user clicking a forward or backward button, but can't seem to figure out how to make the data change from the view.</p>
  
  <p>The variable <code>date</code> changes but not from the browser.</p>
  
  <p>&lt; July 31, 2017 ></p>
  
  <p><a href="https://i.stack.imgur.com/nuJxM.png" rel="nofollow noreferrer">Example pic</a></p>
  
  <p>EDIT: I had originally put my methods inside the constructor (I don't have it that way in my code, but rather me mistyping it in the question here)</p>
  
  <p><strong>App Component</strong></p>
  
  <pre><code>    export class AppComponent {
         date: Date;
  
         constructor () {
           this.date = new Date();
        }
        dateForward() {
          this.date.setDate(this.date.getDate() + 1);
        }
  
        dateBack() {
          this.date.setDate(this.date.getDate() - 1);
        }                
     }
  </code></pre>
  
  <p><strong>HTML Template</strong></p>
  
  <pre><code>&lt;i (click)="dateBack()" class="fa fa-chevron-left" &gt;&lt;/i&gt;
  &lt;a&gt;{{date | date:'MMM d, y'}}&lt;/a&gt;
  &lt;i  (click)="dateForward()" class="fa fa-chevron-right"&gt;&lt;/i&gt;
  </code></pre>