Update View from Click in Angular

Question

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.

The variable date changes but not from the browser.

< July 31, 2017 >

Example pic

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)

App Component

    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);
      }                
   }

HTML Template

<i (click)="dateBack()" class="fa fa-chevron-left" ></i>
<a>{{date | date:'MMM d, y'}}</a>
<i  (click)="dateForward()" class="fa fa-chevron-right"></i>

Kld · Accepted Answer · 2017-07-30 19:52:36Z

1

Beside not puting your methods inside your constructor you should pay attention to change detection and immutability this.date.setDate(this.date.getDate() + 1) will not trigger change detection, to enforce that you need this.date = new Date(this.date.setDate(this.date.getDate() + 1));, the change detector will notice the change only if you change to a different object entirely and not when you set an object properties, same thing with arrays

 constructor() {
    this.date = new Date();
 }

 dateForward() { 
    this.date = new Date(this.date.setDate(this.date.getDate() + 1));
 }

 dateBack() {
   this.date = new Date(this.date.setDate(this.date.getDate() - 1));
 }

edited Jul 30, 2017 at 19:52

answered Jul 30, 2017 at 19:47

Kld

7,1183 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tom · Accepted Answer · 2017-07-30 19:37:30Z

0

You should not put your functions in your constructor. Instead, you should create methods in your class, this will allow you to call them in your HTML template.

public date: Date;

constructor() {
  this.date = new Date();
}

public dateForward = () => this.date.setDate(this.date.getDate() + 1);

public dateBack = () => this.date.setDate(this.date.getDate() - 1);

answered Jul 30, 2017 at 19:37

tom

7405 silver badges20 bronze badges

Comments

Rahul Singh · Accepted Answer · 2017-07-30 19:50:43Z

0

methods should not be inside constructor

date :Date;
  constructor() {
      this.date = new Date();
   }


    dateForward() {
       this.date = new Date(this.date.setDate(this.date.getDate() + 1));
    }
      dateBack() {
       this.date = new Date(this.date.setDate(this.date.getDate() -1 ));
      }

Working Plunker link

answered Jul 30, 2017 at 19:50

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

Abdul Aleem Khan · Accepted Answer · 2017-07-30 19:57:37Z

0

in angular inside controller you can define a $scope variable lets say you call that variable date.

e.g. $scope.date = new Date().getDate();

Then inside your html you can access it

<div> {{date}} </div>

And whenever you click your call to action buttons you can change the value of this $scope variable and as soon as it will change the value of HTML will be updated automatically.

You can run the following code to see the example.

<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	</head>
	<body>

		<div ng-app="myApp" ng-controller="myCtrl">

			<h1>{{date | date:'MMM d, y'}}</h1>

			<a href="#" ng-click="dateBack();">Back</a>
			<a href="#" ng-click="dateForward();">Forward</a>
		</div>


		<script>
			var app = angular.module('myApp', []);

			app.controller('myCtrl', function($scope) {
			    $scope.date = new Date();
			    
			    $scope.dateBack = function(){
			    	$scope.date.setDate($scope.date.getDate() - 1);
			    };
			    
			    $scope.dateForward = function(){
			    	$scope.date.setDate($scope.date.getDate() + 1);
			    };
			});
		</script>

	</body>
</html>

answered Jul 30, 2017 at 19:57

Abdul Aleem Khan

839 bronze badges

1 Comment

Nathan H Over a year ago

Thanks for the reply, but I'm not sure this is relevant for my issue? I'm using angular 4 whereas this seems to apply to angularjs. Forgive me if I'm mistaken, but the answer that Kld provided solved my issue.

Collectives™ on Stack Overflow

Update View from Click in Angular

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related