Use queryParameter for dates.

src/operations/operationList.component.ts

@@ -20,8 +20,7 @@ import { OperationEditModalComponent } from './operationEditModal.component';
 <div>
   <div class="row">
     <div class="col-md-8">
-      <balance-chart (onUpdate)="onUpdate($event)"
-        [account]="account"></balance-chart>
+      <balance-chart [account]="account"></balance-chart>
     </div>
 
     <div class="col-md-4">
@@ -65,8 +64,6 @@ import { OperationEditModalComponent } from './operationEditModal.component';
 })
 export class OperationListComponent implements OnInit {
   private account: Account;
-  private minDate: Date;
-  private maxDate: Date;
   public operations: Operation[];
 
   constructor(
@@ -84,6 +81,12 @@ export class OperationListComponent implements OnInit {
     ).subscribe(account => {
       this.account = account
     });
+
+    this.route.queryParamMap.subscribe(() => {
+      this.loadData();
+    });
+
+    this.loadData();
   }
 
   /*
@@ -91,7 +94,8 @@ export class OperationListComponent implements OnInit {
    */
   add() {
     var operation = new Operation();
-    operation.account_id = this.account.id;
+    let accountId = this.route.snapshot.paramMap.get('accountId');
+    operation.account_id = +accountId;
 
     // FIXME Alexis Lahouze 2017-06-15 i18n
     const modal = this.ngbModal.open(OperationEditModalComponent, {
@@ -109,14 +113,15 @@ export class OperationListComponent implements OnInit {
   /*
    * Load operations.
    */
-  load(minDate, maxDate) {
-    this.minDate = minDate;
-    this.maxDate = maxDate;
+  loadData() {
+    let accountId = this.route.snapshot.paramMap.get('accountId');
+    let fromDay = this.route.snapshot.queryParamMap.get('from');
+    let toDay = this.route.snapshot.queryParamMap.get('to');
 
     return this.operationService.query(
-      this.account.id,
-      minDate,
-      maxDate
+      +accountId,
+      fromDay,
+      toDay
     ).subscribe((operations: Operation[]) => {
       this.operations = operations.reverse();
     });
@@ -132,7 +137,7 @@ export class OperationListComponent implements OnInit {
       (operation) => {
         this.toastrService.success('Operation #' + operation.id + ' saved.');
 
-        this.load(this.minDate, this.maxDate);
+        this.loadData();
       }, (result) => {
         this.toastrService.error(
           'Error while saving operation: ' + result.message
@@ -140,8 +145,4 @@ export class OperationListComponent implements OnInit {
       }
     );
   };
-
-  onUpdate(dateRange) {
-    this.load(dateRange.minDate, dateRange.maxDate);
-  };
 };