How to get the value of an IPC message outside of the console log?

Question

I am using electron and angular to develop an app where I am trying to send some information stored locally on my computer. I am able to successfully send a message from the electron side to the angular side at the correct time. However, I cannot access the message anywhere else than in the console log.

file.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class FileService {
  private ipc: IpcRenderer | undefined;
  private filePath: string[];
  constructor() {
    if (window.require) {
      try {
        this.ipc = window.require('electron').ipcRenderer;
      } catch (error) {
        throw error;
      }
    } else {
      console.warn('Could not load electron ipc');
    }
    this.ipc.on('getFiles', (event, file) => {
      this.filePath = file;
      console.log('in service: ' + this.filePath); // correct
    });
  }

  public getFilePaths(): string[] {
    return this.filePath; // undefined
  }
}

part of app.component.ts:

export class AppComponent implements OnInit{
  constructor(private formBuilder: FormBuilder, private fileService: FileService) {
  }
  ngOnInit(): void {
    const bob: string[] = this.fileService.getFilePaths();
    console.log('in component: ' + bob); // undefined
}

There is another method I have found, but I cannot get the message out of the promise. file.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class FileService {
  private ipc: IpcRenderer | undefined;
  constructor() {
    if (window.require) {
      try {
        this.ipc = window.require('electron').ipcRenderer;
      } catch (error) {
        throw error;
      }
    } else {
      console.warn('Could not load electron ipc');
    }
  }

  async getFiles(): Promise<string[]> {
    return new Promise<string[]>((resolve) => {
      this.ipc.on('getFiles', (event, info) => {
        resolve(info);
      });
    });
  }
}

part of app.component.ts:

export class AppComponent implements OnInit{
  constructor(private formBuilder: FormBuilder, private fileService: FileService) {
  }
  ngOnInit(): void {
    this.fileService.getFiles().then(console.log); // works, but only way to access message
}

If there is a way to get the message into a string[] variable through either method or a different one, I would greatly appreciate the help.

Answer 1

You could use this second approach resolving the async method to a variable.

Can you try doing the following and see if it works?

export class AppComponent implements OnInit {
  private myVariable: string[]

  constructor(
   private formBuilder: FormBuilder, 
   private fileService: FileService
  ) { }

  async ngOnInit(): Promise<void> {
    this.myVariable = await this.fileService.getFiles()
  }
}