fix(directionality): complete dir change observable (#8874)

Since it's most likely to use the `Dir.change` observable programmatically, rather than through an event binding, we should complete it in order to ensure that everything is cleaned up.

src/cdk/bidi/dir.ts

@@ -10,7 +10,9 @@ import {
   Directive,
   Output,
   Input,
-  EventEmitter
+  EventEmitter,
+  AfterContentInit,
+  OnDestroy,
 } from '@angular/core';
 
 import {Direction, Directionality} from './directionality';
@@ -27,7 +29,7 @@ import {Direction, Directionality} from './directionality';
   host: {'[dir]': 'dir'},
   exportAs: 'dir',
 })
-export class Dir implements Directionality {
+export class Dir implements Directionality, AfterContentInit, OnDestroy {
   _dir: Direction = 'ltr';
 
   /** Whether the `value` has been set to its initial value. */
@@ -40,7 +42,7 @@ export class Dir implements Directionality {
   @Input('dir')
   get dir(): Direction { return this._dir; }
   set dir(v: Direction) {
-    let old = this._dir;
+    const old = this._dir;
     this._dir = v;
     if (old !== this._dir && this._isInitialized) {
       this.change.emit(this._dir);
@@ -54,5 +56,9 @@ export class Dir implements Directionality {
   ngAfterContentInit() {
     this._isInitialized = true;
   }
+
+  ngOnDestroy() {
+    this.change.complete();
+  }
 }
 

src/cdk/bidi/directionality.spec.ts

@@ -77,6 +77,19 @@ describe('Directionality', () => {
       expect(injectedDirectionality.value).toBe('ltr');
       expect(fixture.componentInstance.changeCount).toBe(1);
     }));
+
+    it('should complete the change stream on destroy', fakeAsync(() => {
+      const fixture = TestBed.createComponent(ElementWithDir);
+      const dir =
+        fixture.debugElement.query(By.directive(InjectsDirectionality)).componentInstance.dir;
+      const spy = jasmine.createSpy('complete spy');
+      const subscription = dir.change.subscribe(undefined, undefined, spy);
+
+      fixture.destroy();
+      expect(spy).toHaveBeenCalled();
+      subscription.unsubscribe();
+    }));
+
   });
 });