Scroll down if new action appears

.gitignore

@@ -55,3 +55,4 @@ __build__/**
 # Build Artifacts #
 release
 .ngc
+*.ngfactory.ts

package.json

@@ -58,6 +58,7 @@
     "@angular/platform-server": "^2.0.0-rc.6",
     "@ngrx/core": "^1.0.0",
     "@ngrx/store": "^2.1.2",
+    "@ngrx/store-devtools": "^3.1.0",
     "@types/jasmine": "^2.2.33",
     "@types/node": "^6.0.38",
     "awesome-typescript-loader": "^2.2.1",

src/log-monitor/log-monitor.ts

@@ -1,4 +1,4 @@
-import { Component, Input  } from '@angular/core';
+import { Component, Input, AfterViewChecked, ElementRef, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { map } from 'rxjs/operator/map';
 import { StoreDevtools } from '@ngrx/store-devtools';
@@ -60,7 +60,7 @@ import { LogEntryItem } from './log-entry-item';
         Commit
       </log-monitor-button>
     </div>
-    <div class="elements">
+    <div class="elements" #scrollContainer>
       <log-monitor-entry
         *ngFor="let item of (items$ | async); let i = index"
         [item]="item"
@@ -71,44 +71,64 @@ import { LogEntryItem } from './log-entry-item';
     </div>
   `
 })
-export class LogMonitorComponent {
+export class LogMonitorComponent implements AfterViewChecked {
+  @ViewChild('scrollContainer') private scrollContainer: ElementRef;
   @Input() expandEntries: boolean = true;
 
   public items$: Observable<LogEntryItem[]>;
   public canRevert$: Observable<boolean>;
   public canSweep$: Observable<boolean>;
   public canCommit$: Observable<boolean>;
+  private _scrollDown: boolean = false;
+  private _previousActions: any = [];
 
   constructor(private devtools: StoreDevtools) {
-    this.canRevert$ = select.call(devtools.liftedState, s => !(s.computedStates.length > 1 ));
+    this.canRevert$ = select.call(devtools.liftedState, s => !(s.computedStates.length > 1));
     this.canSweep$ = select.call(devtools.liftedState, s => !(s.skippedActionIds.length > 0));
     this.canCommit$ = select.call(devtools.liftedState, s => !(s.computedStates.length > 1));
 
     this.items$ = map.call(devtools.liftedState, ({ actionsById, skippedActionIds, stagedActionIds, computedStates }) => {
-        const actions = [];
-
-        for (let i = 0; i < stagedActionIds.length; i++) {
-          const actionId = stagedActionIds[i];
-          const action = actionsById[actionId].action;
-          const { state, error } = computedStates[i];
-          let previousState;
-          if (i > 0) {
-            previousState = computedStates[i - 1].state;
-          }
-
-          actions.push({
-            key: actionId,
-            collapsed: skippedActionIds.indexOf(actionId) > -1,
-            action,
-            actionId,
-            state,
-            previousState,
-            error
-          });
+      const actions = [];
+
+      for (let i = 0; i < stagedActionIds.length; i++) {
+        const actionId = stagedActionIds[i];
+        const action = actionsById[actionId].action;
+        const { state, error } = computedStates[i];
+        let previousState;
+        if (i > 0) {
+          previousState = computedStates[i - 1].state;
         }
 
-        return actions;
-      });
+        actions.push({
+          key: actionId,
+          collapsed: skippedActionIds.indexOf(actionId) > -1,
+          action,
+          actionId,
+          state,
+          previousState,
+          error
+        });
+      }
+
+      // check if there are new items in the list so we can scroll down      
+      this._scrollDown = actions.length - this._previousActions.length > 0;
+      this._previousActions = actions;
+
+      return actions;
+    });
+  }
+
+  ngAfterViewChecked() {
+    if (this._scrollDown) {
+      this.scrollToBottom();
+      this._scrollDown = false;
+    }
+  }
+
+  scrollToBottom(): void {
+    try {
+      this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight;
+    } catch (err) { }
   }
 
   handleToggle(id: number) {