Cleans up observables when component is destroyed.

src/app/chat-message/chat-message.component.ts

@@ -1,9 +1,6 @@
-import {
-  Component,
-  OnInit,
-  Input
-} from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 
 import { UsersService } from './../user/users.service';
 import { ThreadsService } from './../thread/threads.service';
@@ -18,22 +15,26 @@ import { User } from './../user/user.model';
   templateUrl: './chat-message.component.html',
   styleUrls: ['./chat-message.component.css']
 })
-export class ChatMessageComponent implements OnInit {
+export class ChatMessageComponent implements OnInit, OnDestroy {
   @Input() message: Message;
   currentUser: User;
   incoming: boolean;
+  private subscription: Subscription;
 
-  constructor(public UsersService: UsersService) {
-  }
+  constructor(public UsersService: UsersService) {}
 
   ngOnInit(): void {
-    this.UsersService.currentUser
-      .subscribe(
-        (user: User) => {
-          this.currentUser = user;
-          if (this.message.author && user) {
-            this.incoming = this.message.author.id !== user.id;
-          }
-        });
+    this.subscription = this.UsersService.currentUser.subscribe(
+      (user: User) => {
+        this.currentUser = user;
+        if (this.message.author && user) {
+          this.incoming = this.message.author.id !== user.id;
+        }
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
   }
 }

src/app/chat-nav-bar/chat-nav-bar.component.ts

@@ -1,10 +1,8 @@
-import {
-  Component,
-  Inject,
-  OnInit
-} from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import * as _ from 'lodash';
 
+import { Subscription } from 'rxjs/Subscription';
+
 import { ThreadsService } from './../thread/threads.service';
 import { MessagesService } from './../message/messages.service';
 
@@ -16,37 +14,45 @@ import { Message } from './../message/message.model';
   templateUrl: './chat-nav-bar.component.html',
   styleUrls: ['./chat-nav-bar.component.css']
 })
-export class ChatNavBarComponent implements OnInit {
+export class ChatNavBarComponent implements OnInit, OnDestroy {
   unreadMessagesCount: number;
+  private subscription: Subscription;
 
-  constructor(public messagesService: MessagesService,
-              public threadsService: ThreadsService) {
-  }
+  constructor(
+    public messagesService: MessagesService,
+    public threadsService: ThreadsService
+  ) {}
 
   ngOnInit(): void {
-    this.messagesService.messages
+    this.subscription = this.messagesService.messages
       .combineLatest(
         this.threadsService.currentThread,
-        (messages: Message[], currentThread: Thread) =>
-          [currentThread, messages] )
+        (messages: Message[], currentThread: Thread) => [
+          currentThread,
+          messages
+        ]
+      )
 
       .subscribe(([currentThread, messages]: [Thread, Message[]]) => {
-        this.unreadMessagesCount =
-          _.reduce(
-            messages,
-            (sum: number, m: Message) => {
-              const messageIsInCurrentThread: boolean = m.thread &&
-                currentThread &&
-                (currentThread.id === m.thread.id);
-              // note: in a "real" app you should also exclude
-              // messages that were authored by the current user b/c they've
-              // already been "read"
-              if (m && !m.isRead && !messageIsInCurrentThread) {
-                sum = sum + 1;
-              }
-              return sum;
-            },
-            0);
+        this.unreadMessagesCount = _.reduce(
+          messages,
+          (sum: number, m: Message) => {
+            const messageIsInCurrentThread: boolean =
+              m.thread && currentThread && currentThread.id === m.thread.id;
+            // note: in a "real" app you should also exclude
+            // messages that were authored by the current user b/c they've
+            // already been "read"
+            if (m && !m.isRead && !messageIsInCurrentThread) {
+              sum = sum + 1;
+            }
+            return sum;
+          },
+          0
+        );
       });
   }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }

src/app/chat-thread/chat-thread.component.ts

@@ -3,9 +3,11 @@ import {
   OnInit,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  OnDestroy
 } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import { ThreadsService } from './../thread/threads.service';
 import { Thread } from '../thread/thread.model';
 
@@ -14,24 +16,28 @@ import { Thread } from '../thread/thread.model';
   templateUrl: './chat-thread.component.html',
   styleUrls: ['./chat-thread.component.css']
 })
-export class ChatThreadComponent implements OnInit {
+export class ChatThreadComponent implements OnInit, OnDestroy {
   @Input() thread: Thread;
   selected = false;
+  private subscription: Subscription;
 
-  constructor(public threadsService: ThreadsService) {
-  }
+  constructor(public threadsService: ThreadsService) {}
 
   ngOnInit(): void {
-    this.threadsService.currentThread
-      .subscribe( (currentThread: Thread) => {
-        this.selected = currentThread &&
-          this.thread &&
-          (currentThread.id === this.thread.id);
-      });
+    this.subscription = this.threadsService.currentThread.subscribe(
+      (currentThread: Thread) => {
+        this.selected =
+          currentThread && this.thread && currentThread.id === this.thread.id;
+      }
+    );
   }
 
   clicked(event: any): void {
     this.threadsService.setCurrentThread(this.thread);
     event.preventDefault();
   }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }

src/app/chat-window/chat-window.component.ts

@@ -3,9 +3,11 @@ import {
   Inject,
   ElementRef,
   OnInit,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  OnDestroy
 } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 
 import { User } from '../user/user.model';
 import { UsersService } from '../user/users.service';
@@ -20,41 +22,39 @@ import { MessagesService } from '../message/messages.service';
   styleUrls: ['./chat-window.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ChatWindowComponent implements OnInit {
+export class ChatWindowComponent implements OnInit, OnDestroy {
   messages: Observable<any>;
   currentThread: Thread;
   draftMessage: Message;
   currentUser: User;
 
-  constructor(public messagesService: MessagesService,
-              public threadsService: ThreadsService,
-              public UsersService: UsersService,
-              public el: ElementRef) {
-  }
+  private subscription: Subscription;
+
+  constructor(
+    public messagesService: MessagesService,
+    public threadsService: ThreadsService,
+    public UsersService: UsersService,
+    public el: ElementRef
+  ) {}
 
   ngOnInit(): void {
     this.messages = this.threadsService.currentThreadMessages;
 
     this.draftMessage = new Message();
 
-    this.threadsService.currentThread.subscribe(
-      (thread: Thread) => {
-        this.currentThread = thread;
-      });
+    this.threadsService.currentThread.subscribe((thread: Thread) => {
+      this.currentThread = thread;
+    });
 
-    this.UsersService.currentUser
-      .subscribe(
-        (user: User) => {
-          this.currentUser = user;
-        });
+    this.UsersService.currentUser.subscribe((user: User) => {
+      this.currentUser = user;
+    });
 
-    this.messages
-      .subscribe(
-        (messages: Array<Message>) => {
-          setTimeout(() => {
-            this.scrollToBottom();
-          });
-        });
+    this.subscription = this.messages.subscribe((messages: Array<Message>) => {
+      setTimeout(() => {
+        this.scrollToBottom();
+      });
+    });
   }
 
   onEnter(event: any): void {
@@ -72,8 +72,13 @@ export class ChatWindowComponent implements OnInit {
   }
 
   scrollToBottom(): void {
-    const scrollPane: any = this.el
-      .nativeElement.querySelector('.msg-container-base');
+    const scrollPane: any = this.el.nativeElement.querySelector(
+      '.msg-container-base'
+    );
     scrollPane.scrollTop = scrollPane.scrollHeight;
   }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }