Merge pull request #4252 from IgniteUI/mvenkov/toggle-does-not-emit-closed-#4222

Toggle does not fire onClosed after first call to close

Author: bazal4o

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

@@ -420,6 +420,36 @@ describe('IgxToggle', () => {
         expect(toggle.onClosed.emit).toHaveBeenCalledTimes(1);
     }));
 
+    it('fix for #4222 - Should emit closed when closed second time', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxToggleTestComponent);
+        fixture.detectChanges();
+
+        const toggle = fixture.componentInstance.toggle;
+        toggle.onClosed.subscribe(() => {
+            toggle.open();
+        });
+
+        spyOn(toggle.onOpening, 'emit');
+        spyOn(toggle.onClosed, 'emit').and.callThrough();
+
+        toggle.open();
+        tick();
+        fixture.detectChanges();
+        expect(toggle.onOpening.emit).toHaveBeenCalledTimes(1);
+
+        toggle.close();
+        tick();
+        fixture.detectChanges();
+        expect(toggle.onClosed.emit).toHaveBeenCalledTimes(1);
+        expect(toggle.onOpening.emit).toHaveBeenCalledTimes(2);
+
+        toggle.close();
+        tick();
+        fixture.detectChanges();
+        expect(toggle.onClosed.emit).toHaveBeenCalledTimes(2);
+        expect(toggle.onOpening.emit).toHaveBeenCalledTimes(3);
+    }));
+
     describe('overlay settings', () => {
         configureTestSuite();
         it('should pass correct defaults from IgxToggleActionDirective and respect outsideClickClose', fakeAsync(() => {

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -305,8 +305,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this._collapsed = true;
         this.cdr.detectChanges();
         delete this._overlayId;
-        this.onClosed.emit();
         this.unsubscribe();
+        this.onClosed.emit();
     }
 
     private unsubscribe() {