Angular - pass data from uploaded file to other component-CodePudding

I have one component (FileUploadComponent) that accepts a file as input and puts the data from the file into an array. After the file has been uploaded and data added to the array, I would like to pass this data to another component for use. I have been able to pass the FileUploadComponent to the other component and access its methods, but even though the array has data in FileUploadComponent, the other component sees it as an empty array.

I am open to suggestions for how to better implement this. Basically what I am trying to achieve is to allow a user to upload a list of names which would then be handled by the app. I have already achieved this with a service that takes the names from a built in .json file but I would like the user to be able to input the names. I realize that I am probably going about this messily so if there is another, simple way to achieve this then I am open to it.

Here is my code I am working with so far (clipped out irrelevant methods)

FileUploadComponent

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  fileName = '';
  fileData: any;
  icon = 'attach_file'
  partners = []
  text = ''

  constructor(
    public dialog: MatDialog,
    private http: HttpClient) { }

  ngOnInit(): void {
  }

  onFileSelected(event) {
    this.fileData = event.target.files[0];

    if (this.fileData) {
      this.fileName = this.fileData.name;
      this.icon = 'check_circle'
      let fileReader = new FileReader();
      fileReader.onload = (event) => {
        this.text = fileReader.result as string;
        console.log(fileReader.result);
      }
      fileReader.readAsText(this.fileData);
      
    }
    console.log(this.text)
  }

  confirmUpload() {
    for (const line of this.text.split(/[\r\n] /)){
      this.partners.push(line);
    }
    console.log(this.partners);
  }

// The previous methods add the file data to partners[]. This method returns the data.
// I have tested within this component and it does return the data as intended.
  getData() {
    console.log(this.partners);
    return this.partners
  }

}

PartnersComponent - Component to receive data from FileUploadComponent

import { FileUploadComponent } from '../file-upload/file-upload.component';

@Component({
  selector: 'app-partners',
  templateUrl: './partners.component.html',
  styleUrls: ['./partners.component.css']
})
export class PartnersComponent implements OnInit {

  constructor(
    private fileUploadComponent: FileUploadComponent ) { }

  ngOnInit(): void {
  }

// Method is triggered on button click in template and returns empty array instead of data
  confirmData() {
    this.fileUploadComponent.getData();
  }

}

Edit - Solution:

Created a shared service to get and pass the variable between the two components like so. Setting an output property as suggested in the comments may also be viable.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  partnerData: string[] = [];

  constructor() { 
    console.log("Initial Partner Data is: "   this.partnerData);
  }

  setPartnerData(val: string[] = []) {
    this.partnerData = val;
  }

  getPartnerData() {
    return this.partnerData;
  }
}

CodePudding user response：

use an output property on component upload and emit the new value to parent component if upload component is the child. Or use a shared service with subject and subscribe to it