4

I have a component that allows a user to select an option from the port list. Once they've made the selection, they click "Connect Port" button. this calls a service to store the selected port so that it can be stored as a string.

Screenshot of the UI for this step.

I am getting console logs that show the component is successfully calling the service and storing as it should. However, in any other component if I try to call the service with a subscribe; I get errors.

Port Service

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

export interface Port {
  portName: String;
}

@Injectable({
   providedIn: 'root'
})
export class PortService {

activePort;

constructor() { }

setPort(port) {
  console.log('The port: ', port);
  this.activePort = port;
}

getPort(): Observable<Port> {
  console.log('The port for the application runtime: ', this.activePort);
   return this.activePort;
  }
}

App Component

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

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

  title = 'electron-angular-serialport';
  collapsed = false;
  connectedPort;

  constructor(private serial: SerialService, private port: PortService) {
    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.getPort();
  }

  getPort() {
    console.log('Getting Port');
    this.port.getPort().subscribe( data => this.connectedPort = data);
  }
}

I am really hoping that I can store this String "/dev/tty.usbmodem14201". So that I can use it throughout the app.

RN92
  • 1,380
  • 1
  • 13
  • 32
Clayton Allen
  • 239
  • 3
  • 15

1 Answers1

5

Your setPort didn't set the port as Observable, try transform the value to Observable

import {of} from 'rxjs'
...
setPort(port) {
  console.log('The port: ', port);
  this.activePort = of(port);
}
Fan Cheung
  • 10,745
  • 3
  • 17
  • 39
  • So that fixes the issue when I click the Connect button. Thanks for the help. So I still get an error on app load because that port value is empty. So the ngOnInit fails. How would be the best way to solve for that? – Clayton Allen Jan 02 '19 at 03:37
  • 2
    if you want a default value for port you can do of((port?port:yourvalue)) and maybe also set a default value for activePort to begin activePort=of(null). But it actually depends how you want to handle empty value in setPort – Fan Cheung Jan 02 '19 at 04:15
  • Thanks so much for your help. Cheers! – Clayton Allen Jan 02 '19 at 04:17