Updating the use of rowSelectionChanging event in the sample - refactor

Author: IvanKitanov17

src/app/grid/grid-sample-selection/grid-selection.component.html

@@ -49,13 +49,15 @@
     </igx-grid>
 </div>
 
+<igx-snackbar #snackbarRowCount (clicked)="snackbar.close()">
+    <div class="snackBarRowSelection"> <p>Number of selected rows: {{selectedRowsCount}}</p>
+    </div>
+</igx-snackbar>
+
 <igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
     <div class="container">
         <igx-icon>notification_important</igx-icon>
-        <ng-container *ngIf="selectionMode === 'multiple' && selectedRowsCount!==undefined">
-            <p>Number of rows selected: {{selectedRowsCount}}</p>
-        </ng-container>
-        <ng-container *ngIf="selectionMode === 'multiple' && selectedRowsCount===undefined">
+        <ng-container *ngIf="selectionMode === 'multiple'">
             <ul>
                 <li><b>Now you can select multiple rows within a grid.</b></li>
                 <li>Click on row selector field or press SPACE key when some cell is active to toggle row

src/app/grid/grid-sample-selection/grid-selection.component.scss

@@ -58,3 +58,8 @@ ul {
         margin: 20px;
     }
 }
+
+.snackBarRowSelection{
+    text-align: center;
+    padding-bottom: 10px;
+}

src/app/grid/grid-sample-selection/grid-selection.component.ts

@@ -15,7 +15,9 @@ import { FinancialDataService } from '../../services/financial.service';
 
 export class GridSelectionSampleComponent implements OnInit {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
-    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
+    @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent;
+    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
+    //@ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
     public data: Observable<any[]>;
     public selectionMode = 'multiple';
     public selectionModes = [];
@@ -34,8 +36,10 @@ export class GridSelectionSampleComponent implements OnInit {
 
     }
     public ngOnInit(): void {
-        this.snackbar.autoHide = true;
+        this.snackbar.autoHide = false;
         this.snackbar.open();
+        this.snackbarRowCount.autoHide = true;
+        this.snackbarRowCount.close();
     }
     public formatNumber(value: number) {
         return value.toFixed(2);
@@ -45,12 +49,14 @@ export class GridSelectionSampleComponent implements OnInit {
     }
     public handleRowSelection(event:IRowSelectionEventArgs) {
         this.selectedRowsCount = event.newSelection.length;
-        this.snackbar.open();
+        this.snackbarRowCount.open();
+        this.snackbar.close();
     }
 
     public selectCellSelectionMode(args) {
         this.selectionMode = this.selectionModes[args.index].label;
         this.snackbar.open();
+        this.snackbarRowCount.close();
         this.selectedRowsCount = undefined;
     }
 }