Merge pull request #1212 from IgniteUI/fix-code-issue-finjs

Fix the trend icon for grid finjs demo, debounce the slider value changed event

Author: zdrawku

src/app/grid-finjs/grid-finjs-demo.component.html

@@ -12,7 +12,7 @@
             </div>
             <div class="finjs-slider control-item">
                 <label for="slider">Records: {{volume}}</label>
-                <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100" (onValueChange)="onVolumeChanged($event)" thumbLabelVisibilityDuration="250"></igx-slider>
+                <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100" thumbLabelVisibilityDuration="250"></igx-slider>
             </div>
             <div class="finjs-slider control-item">
                 <label for="slider">Frequency: {{frequency}} ms</label>
@@ -51,8 +51,8 @@
             <ng-template igxCell let-cell="cell">
                 <div class="finjs-icons">
                     <span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
-                    <igx-icon *ngIf="trends.positive(cell.row.rowData)" name="trending_up">trending_up</igx-icon>
-                    <igx-icon *ngIf="trends.negative(cell.row.rowData)" name="trending_down">trending_down</igx-icon>
+                    <igx-icon *ngIf="trends.positive(cell.row.rowData)">trending_up</igx-icon>
+                    <igx-icon *ngIf="trends.negative(cell.row.rowData)">trending_down</igx-icon>
                 </div>
             </ng-template>
         </igx-column>

src/app/grid-finjs/grid-finjs-demo.component.ts

@@ -1,7 +1,8 @@
 import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { DefaultSortingStrategy, IgxButtonGroupComponent, IgxGridComponent, IgxSliderComponent,
     SortingDirection} from "igniteui-angular";
-import { Observable } from "rxjs";
+import { Observable, timer } from "rxjs";
+import { debounce } from "rxjs/operators";
 import { LocalDataService } from "./localData.service";
 
 @Component({
@@ -44,6 +45,7 @@ export class FinJSDemoComponent implements OnInit, AfterViewInit, OnDestroy {
     private subscription;
     private selectedButton;
     private _timer;
+    private volumeChanged;
 
     constructor(private localService: LocalDataService, private elRef: ElementRef) {
         this.subscription = this.localService.getData(this.volume);
@@ -70,6 +72,12 @@ export class FinJSDemoComponent implements OnInit, AfterViewInit, OnDestroy {
                 strategy: DefaultSortingStrategy.instance()
             }
         ];
+        this.volumeChanged = this.volumeSlider.onValueChange.pipe(debounce(() => timer(200)));
+        this.volumeChanged.subscribe(
+            (x) => {
+                this.localService.getData(this.volume);
+            },
+            (err) => console.log("Error: " + err));
     }
 
     public ngAfterViewInit() {
@@ -149,10 +157,6 @@ export class FinJSDemoComponent implements OnInit, AfterViewInit, OnDestroy {
         return "$" + value.toFixed(3);
     }
 
-    public onVolumeChanged(event: any) {
-        this.localService.getData(this.volume);
-    }
-
     /**
      * the below code is needed when accessing the sample through the navigation
      * it will style all the space below the sample component element, but not the navigation menu
@@ -168,6 +172,7 @@ export class FinJSDemoComponent implements OnInit, AfterViewInit, OnDestroy {
 
     public ngOnDestroy() {
         this.stopFeed();
+        this.volumeChanged.unsubscribe();
     }
 
     public toggleToolbar(event: any) {

src/app/treegrid-finjs/tree-grid-finjs-sample.component.html

@@ -9,7 +9,7 @@
             </div>
             <div class="finjs-slider control-item">
                 <label for="slider">Records: {{volume}}</label>
-                <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100" (onValueChange)="onVolumeChanged($event)" thumbLabelVisibilityDuration="250"></igx-slider>
+                <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100" thumbLabelVisibilityDuration="250"></igx-slider>
             </div>
             <div class="finjs-slider control-item">
                 <label for="slider">Frequency: {{frequency}} ms</label>

src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts

@@ -3,6 +3,8 @@ import { AfterViewInit, Component, ElementRef, NgZone, OnDestroy, ViewChild } fr
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment,
     IgxButtonGroupComponent, IgxSliderComponent, IgxTreeGridComponent, OverlaySettings,
     PositionSettings, SortingDirection, VerticalAlignment} from "igniteui-angular";
+import { timer } from "rxjs";
+import { debounce } from "rxjs/operators";
 import { LocalDataService } from "../grid-finjs/localData.service";
 import { ITreeGridAggregation } from "./tree-grid-grouping.pipe";
 
@@ -86,6 +88,7 @@ export class TreeGridFinJSComponent implements AfterViewInit, OnDestroy  {
     private subscription;
     private selectedButton;
     private _timer;
+    private volumeChanged;
 
     constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
         this.subscription = this.localService.getData(this.volume);
@@ -94,6 +97,12 @@ export class TreeGridFinJSComponent implements AfterViewInit, OnDestroy  {
 
     public ngOnInit() {
         this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }];
+        this.volumeChanged = this.volumeSlider.onValueChange.pipe(debounce(() => timer(200)));
+        this.volumeChanged.subscribe(
+            (x) => {
+                this.localService.getData(this.volume);
+            },
+            (err) => console.log("Error: " + err));
     }
 
     public ngAfterViewInit() {
@@ -144,10 +153,6 @@ export class TreeGridFinJSComponent implements AfterViewInit, OnDestroy  {
         return value ? "$" + value.toFixed(3) : "";
     }
 
-    public onVolumeChanged(event: any) {
-        this.localService.getData(this.volume);
-    }
-
     /**
      * the below code is needed when accessing the sample through the navigation
      * it will style all the space below the sample component element, but not the navigation menu
@@ -163,6 +168,7 @@ export class TreeGridFinJSComponent implements AfterViewInit, OnDestroy  {
 
     public ngOnDestroy() {
         this.stopFeed();
+        this.volumeChanged.unsubscribe();
     }
 
     public toggleToolbar(event: any) {