Electron + Angular7 How to use serialport.list() in a Component

Question

Thanks to another member on stackoverflow I was able to use SerialPort in an Electron App. Now on the next issue.

I have a component in Angular that I would like to have a dropdown to select a serialport to connect to. But I am trying to figure out how the serialport.list() works.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { } from 'electron';
import * as Serialport from 'serialport';
import { SerialService } from './serial.service';

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

  title = 'electron-angular-serialport';
  comPorts = [];

  constructor(private serial: SerialService) {
    let isElectron: boolean = window && window['process'] && window['process'].type;

    if (isElectron) {
      let serialport: typeof Serialport = window['require']('serialport');
      let app: Electron.App = window['require']('electron').remote;
      console.log(serialport, app, window['process']);
    }
  }

  ngOnInit() {
    this.getPorts();
    console.log(this.comPorts);
  }

  // getPorts() {
  //   this.serial.serialPort.list(function (err, ports) {
  //     ports.forEach(function(port) {
  //       this.comPorts.push(port);
  //     });
  //   });
  // }

  getPorts() {
    this.comPorts = this.serial.serialPort.list();
  }
}

Result

If you look at the commented code block, you'll notice I tried to push each port into comPorts. But this gives an error stating that comPorts is undefined. Which is weird because I assume that the scope isn't lost here.

I would to specifically grab those two ports and push them into my comPorts so that I can make a dropdown so a user could select the Arduino to connect to.

Cheers,

Answer 1

try:

getPorts() {
     this.serial.serialPort.list((err, ports) => {
       ports.forEach(port => {
         this.comPorts.push(port);
       });
     });
   }