some files weren't committed/pushed

src/app/app.module.ts

@@ -8,9 +8,10 @@ import { TreeModule } from 'primeng/tree';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
+import { DropdownComponent } from './main/dropdown/dropdown.component';
 
 @NgModule({
-  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent],
+  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent, DropdownComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/main/dropdown/dropdown.component.html

@@ -0,0 +1,13 @@
+<h3 class="ml-2">Please select a model: </h3>
+
+<ng-container *ngIf="selectedXA == ''">
+    <p class="ml-2"></p>
+</ng-container>
+
+<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
+    <option *ngFor="let model of xaList" ngValue="model.value">{{model.name}}</option>
+</select>
+
+<ng-container *ngIf="selectedXA == 'Test'">
+    <p class="ml-2">No information is available for selected model</p>
+</ng-container>

src/app/main/dropdown/dropdown.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/dropdown/dropdown.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { XAService } from 'src/app/services/XAService.service';
+
+@Component({
+  selector: 'app-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.css']
+})
+export class DropdownComponent implements OnInit {
+  constructor(private xaService: XAService) { }
+
+  xaList = [{ name: null, value: null }, { name: 'UConn', value: 1 }, { name: 'Test', value: 2 }];
+
+  selectedXA = '';
+
+  selectOptionHandler(event: any) {
+    this.selectedXA = event.target.value;
+    this.xaService.changeXA(this.selectedXA);
+  }
+
+  ngOnInit() {
+  }
+}

src/app/main/main.component.html

@@ -1,3 +1,5 @@
+<app-dropdown></app-dropdown>
+<p></p>
 <div class="d-flex h-100 w-100">
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>

src/app/main/main.component.ts

@@ -6,7 +6,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit() {

src/app/main/tree/tree.component.html

@@ -1,25 +1,13 @@
-<h2 class="ml-2">Select XA: </h2>
-
-<ng-container *ngIf="selectedXA == ''">
-    <h4 class="ml-2">Please select a model</h4>
-</ng-container>
-
-<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
-    <option value="">none</option>
-    <option value="uconn">UConn</option>
-    <option value="test">Test</option>
-</select>
-
-<ng-container *ngIf="selectedXA == 'test'">
-    <p class="ml-2">No information is available for selected model</p>
-</ng-container>
-
-<ng-container *ngIf="selectedXA == 'uconn'">
+<ng-container *ngIf="currentXA != null; else noXA">
     <p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
         <ng-template let-node pTemplate="default">
             <div class="tree">
                 <div class="flex-fill">{{ node.label }}</div>
             </div>
         </ng-template>
     </p-tree>
-</ng-container>
+</ng-container>
+
+<ng-template #noXA>
+    <p class="ml-2">No XA selected</p>
+</ng-template>

src/app/main/tree/tree.component.ts

@@ -1,34 +1,40 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { TreeNode } from 'primeng/api';
+import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
+import { XAService } from 'src/app/services/XAService.service';
 
 @Component({
   selector: 'app-tree',
   templateUrl: './tree.component.html',
   styleUrls: ['./tree.component.css']
 })
-export class TreeComponent implements OnInit {
+export class TreeComponent implements OnInit, OnDestroy {
 
+  private dropdownSubscription: Subscription;
+  currentXA: string;
   filesTree: TreeNode[];
 
-  selectedXA = '';
-
-  selectOptionHandler(event: any) {
-    this.selectedXA = event.target.value;
-  }
-
   constructor(
     private treeService: TreeService,
-    private nodeService: NodeService
+    private nodeService: NodeService,
+    private xaService: XAService
   ) { }
 
   ngOnInit() {
+    this.dropdownSubscription = this.xaService.xa$.subscribe(async (xa) => {
+      this.currentXA = xa;
+    });
     this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
   nodeSelect(event: { node: TreeNode }) {
     this.treeService.changeNode(event.node);
   }
 
+  ngOnDestroy() {
+    this.dropdownSubscription.unsubscribe();
+  }
+
 }