Merge pull request #9404 from IgniteUI/dTsvetkov/fix-9349

fix(toolbar): replace column-actions change event

Author: zdrawku

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html

@@ -19,7 +19,8 @@ <h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{
             | filterActionColumns:filterCriteria:pipeTrigger
             | sortActionColumns:columnDisplayOrder:pipeTrigger;"
         class="igx-column-actions__columns-item"
-        (change)="toggleColumn($event, column)"
+        [readonly]="true"
+        (click)="toggleColumn(column)"
         [checked]="actionsDirective.columnChecked(column)"
         [style.margin-left.px]="column.level * indentation">
         {{ column.header || column.field }}

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -406,12 +406,9 @@ export class IgxColumnActionsComponent implements DoCheck {
     /**
      * @hidden @internal
      */
-    public toggleColumn(event: IChangeCheckboxEventArgs, column: IgxColumnComponent) {
+    public toggleColumn(column: IgxColumnComponent) {
         this.actionsDirective.toggleColumn(column);
 
-        this.columnToggled.emit({
-            column,
-            checked: event.checked
-        });
+        this.columnToggled.emit({column, checked: this.actionsDirective.columnChecked(column)});
     }
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts

@@ -1,5 +1,5 @@
 import { Directive, Host, Input, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
 import {
@@ -72,6 +72,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     public columnToggle = new EventEmitter<IColumnToggledEventArgs>();
 
     private $destroyer = new Subject<boolean>();
+    private $sub: Subscription;
 
     /**
      * Returns the grid containing this component.
@@ -105,7 +106,11 @@ export abstract class BaseToolbarDirective implements OnDestroy {
 
     private _setupListeners(toggleRef: IgxToggleDirective, actions? : IgxColumnActionsComponent) {
         if (actions){
-            actions.columnToggled.subscribe((event) => this.columnToggle.emit(event));
+            if (!this.$sub || this.$sub.closed){
+                this.$sub = actions.columnToggled.subscribe((event) => this.columnToggle.emit(event));
+            } else {
+                this.$sub.unsubscribe();
+            }
         }
         /** The if statement prevents emitting open and close events twice  */
         if (toggleRef.collapsed) {

src/app/time-picker/time-picker.sample.html

@@ -13,7 +13,7 @@ <h4 class="sample-title">Time Picker with Date value binding</h4>
         <h4 class="sample-title">Time Picker with string value binding</h4>
         <p class="sample-description">{{showDate(val)}}</p>
         <div class="preview">
-            <igx-time-picker #tp1 [value]="val" [spinLoop]="false" [itemsDelta]="{ hour: 1, minute: 30, second: 20 }"
+            <igx-time-picker #tp1 [value]="val" [spinLoop]="false" [itemsDelta]="{ hours: 1, minutes: 30, seconds: 20 }"
                 [inputFormat]="'hh:mm tt'" (valueChange)="updateValue($event)"
                 (validationFailed)="validationFailed($event)">
             </igx-time-picker>

src/app/time-picker/time-picker.sample.ts

@@ -17,7 +17,7 @@ export class TimePickerSampleComponent {
     @ViewChild('target')
     public target: IgxInputDirective;
 
-    public itemsDelta = { hour: 1, minute: 15, second: 20 };
+    public itemsDelta = { hours: 1, minutes: 15, seconds: 20 };
     public format = 'hh:mm:ss tt';
     public spinLoop = true;
     public datePart = DatePart.Hours;