scrolling actions from footer are now working

src/app/pages/streams-main-display/streams-main-display.component.html

@@ -1,5 +1,5 @@
 <div class="main-display flexcroll">
   <div class="main-display__stream-column" *ngFor="let s of streams">
-    <app-stream [stream]="s"></app-stream>
+    <app-stream [stream]="s" #stream></app-stream>
   </div>
 </div>

src/app/pages/streams-main-display/streams-main-display.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ElementRef } from "@angular/core";
 
 import { Stream } from "../../models/stream.models";
 import { Observable, Subscription } from "rxjs";
@@ -49,8 +49,17 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
         this.columnSelectedSub.unsubscribe();
     }
 
+    @ViewChildren('stream', { read: ElementRef }) public streamsElementRef: QueryList<ElementRef>;;
     private focusOnColumn(columnIndex: number): void {
         console.warn(`col selected: ${columnIndex}`);
+
+        if (columnIndex > -1) {
+            console.warn(this.streamsElementRef);
+
+            setTimeout(() => {
+                this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
+            });
+        }
     }
 
 }

src/app/services/navigation.service.ts

@@ -6,7 +6,7 @@ import { AccountWrapper } from '../models/account.models';
 export class NavigationService {
 
   openColumnEditorSubject = new BehaviorSubject<AccountWrapper>(null);
-  columnSelectedSubject = new BehaviorSubject<number>(null);
+  columnSelectedSubject = new BehaviorSubject<number>(-1);
 
   constructor() { }