Populate a table from a uploaded csv file contents using Angular

Question

Goal: The user uploads a csv file with two fields PersonNumber and Username. The program should read the contents and generate a table on the page. As of now here is what I have done and I am not doing any Server side posts or gets yet. This is just Angular for now.

Component: ToolTrialComponent - tooltrial.component.ts Template: tooltrial.component.html

I am able to extract the data/contents in the csv file using the method below inside the main component class - ToolTrialComponent There are few other functions for the file upload functionality to work but most of them are used from MDBootstrap PRO version of the File Input class and it works.

onFileChange(event) {
  const reader = new FileReader();

  if (event.target.files && event.target.files.length > 0) {
    const file = event.target.files[0];
    reader.readAsText(file);
    reader.onload = () => {
      this.tool1trialform.get('filedetails').setValue({
        filename : file.name,
        filetype : file.type,
        filevalues : reader.result
      });
    };
  }

I have two lines in my template to display what I am getting out of the method.

<div>
     <p>{{tool1trialform.value | json}}></p>
     <p>{{tool1trialform.status | json}}></p>
</div>

So the filevalues key has the contents of the csv as a string that I am interested in. Now I am trying to create a component with a selector and template, access the filevalues variable, parse the string and display it in a table. The problem is I am not sure how to access the filevalues or the tool1trialform.value from the other component class which looks like this. (For the form I have used the ReactiveFormsModule in Angular.

    @Component({
  selector: 'app-data-table',
  template: `<div class="verticalcenter text-center">
  <table class="table">
        <thead class="pink darken-4 lighten-1 white-text">
          <tr>
            <th>PersonNumber</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{datastring1}}</td>
                <td>{{datastring2}}</td>
            </tr>
            <tr>
                <td>{{datastring3}}</td>
                <td>{{datastring4}}</td>
            </tr>
        </tbody>
    </table></div>`
})

I intend to use *ngFor for populating the rows in the table but for now I have just hardcoded the data strings to display how the display should be.

export class PrintDataComponent {
  datastring1 = '162415';
  datastring2 = 'AB_TEST_USER_1@company.com';
  datastring3 = '160869';
  datastring4 = 'AB_TEST_USER_2@oracle.com';
}

If this is the approach I follow and I am able to access and parse the filevalues string using a method in the PrintDataComponent class the next step would be to just plug the line in the tooltrial.component.html template to display the table.

<div><app-data-table></app-data-table></div>

I have also tried accessing the filecontent values from filevalues variable in the method above using the onclick event of the submit button but I am somehow unable to do so. Is there another approach in Angular I should follow to achieve this or the approach mentioned in this question should get me where I want to be. Upload csv file -> read data -> display in the table what was uploaded based on which further data processing will be done and ultimately the processed file will be emailed to the person using the tool.

Hope I was able to explain myself. Any help would be really appreciated.

ng - v (Angular version details for this build I am working on)

Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0