diff --git a/src/app/app.component.html b/src/app/app.component.html index 5bc685e..edcce5c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,10 @@ ETF Demo + + {{file}} + + add Upload diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6ea220f..c3bdcb7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,7 +6,8 @@ import {Component} from '@angular/core'; }) export class AppComponent { chartResults; // This is where the chart reads the data from - chartHeight = '100%'; + chartHeight = '100%'; // Dynamic height for chart + files: string[] = []; // ngx-charts requires a different data structure than the hash map we built so I will use a setter to handle converting it when we go to save the processed data. private _data; @@ -23,6 +24,8 @@ export class AppComponent { // Because we enabled uploading multiple files at once we need to process each one individually const files: File[] = Array.from(fileList); files.forEach(file => { + this.files.push(file.name); + // Process CSV const reader = new FileReader(); reader.onload = (e: ProgressEvent) => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 517c7dd..d3ca1b0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; -import {MatButtonModule, MatIconModule, MatToolbarModule} from '@angular/material'; +import {MatButtonModule, MatChipsModule, MatIconModule, MatToolbarModule} from '@angular/material'; import {NgxChartsModule} from '@swimlane/ngx-charts'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -13,6 +13,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; BrowserAnimationsModule, BrowserModule, MatButtonModule, + MatChipsModule, MatIconModule, MatToolbarModule, NgxChartsModule,