fix(directionality): complete change event on destroy (#10826)

Fixes the `change` event on the top-level `Directionality` service not being completed.

Author: crisbeto

src/cdk/bidi/directionality.spec.ts

@@ -20,8 +20,8 @@ describe('Directionality', () => {
     it('should read dir from the html element if not specified on the body', () => {
       fakeDocument.documentElement.dir = 'rtl';
 
-      let fixture = TestBed.createComponent(InjectsDirectionality);
-      let testComponent = fixture.debugElement.componentInstance;
+      const fixture = TestBed.createComponent(InjectsDirectionality);
+      const testComponent = fixture.debugElement.componentInstance;
 
       expect(testComponent.dir.value).toBe('rtl');
     });
@@ -30,23 +30,36 @@ describe('Directionality', () => {
       fakeDocument.documentElement.dir = 'ltr';
       fakeDocument.body.dir = 'rtl';
 
-      let fixture = TestBed.createComponent(InjectsDirectionality);
-      let testComponent = fixture.debugElement.componentInstance;
+      const fixture = TestBed.createComponent(InjectsDirectionality);
+      const testComponent = fixture.debugElement.componentInstance;
 
       expect(testComponent.dir.value).toBe('rtl');
     });
 
     it('should default to ltr if nothing is specified on either body or the html element', () => {
-      let fixture = TestBed.createComponent(InjectsDirectionality);
-      let testComponent = fixture.debugElement.componentInstance;
+      const fixture = TestBed.createComponent(InjectsDirectionality);
+      const testComponent = fixture.debugElement.componentInstance;
 
       expect(testComponent.dir.value).toBe('ltr');
     });
+
+    it('should complete the `change` stream on destroy', () => {
+      const fixture = TestBed.createComponent(InjectsDirectionality);
+      const spy = jasmine.createSpy('complete spy');
+      const subscription =
+          fixture.componentInstance.dir.change.subscribe(undefined, undefined, spy);
+
+      fixture.componentInstance.dir.ngOnDestroy();
+      expect(spy).toHaveBeenCalled();
+
+      subscription.unsubscribe();
+    });
+
   });
 
   describe('Dir directive', () => {
     it('should provide itself as Directionality', () => {
-      let fixture = TestBed.createComponent(ElementWithDir);
+      const fixture = TestBed.createComponent(ElementWithDir);
       const injectedDirectionality =
         fixture.debugElement.query(By.directive(InjectsDirectionality)).componentInstance.dir;
 
@@ -56,7 +69,7 @@ describe('Directionality', () => {
     });
 
     it('should emit a change event when the value changes', fakeAsync(() => {
-      let fixture = TestBed.createComponent(ElementWithDir);
+      const fixture = TestBed.createComponent(ElementWithDir);
       const injectedDirectionality =
         fixture.debugElement.query(By.directive(InjectsDirectionality)).componentInstance.dir;
 

src/cdk/bidi/directionality.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {EventEmitter, Inject, Injectable, Optional} from '@angular/core';
+import {EventEmitter, Inject, Injectable, Optional, OnDestroy} from '@angular/core';
 import {DIR_DOCUMENT} from './dir-document-token';
 
 
@@ -18,7 +18,7 @@ export type Direction = 'ltr' | 'rtl';
  * Exposes the current direction and a stream of direction changes.
  */
 @Injectable({providedIn: 'root'})
-export class Directionality {
+export class Directionality implements OnDestroy {
   /** The current 'ltr' or 'rtl' value. */
   readonly value: Direction = 'ltr';
 
@@ -36,4 +36,8 @@ export class Directionality {
       this.value = (bodyDir || htmlDir || 'ltr') as Direction;
     }
   }
+
+  ngOnDestroy() {
+    this.change.complete();
+  }
 }