All chromium based browsers support serial port access. When we are using embedded devices and development boards like Arduino, Esp32, Esp8266 etc, we would want to connect to the device and look at the serial logs.

I have opensourced the Serial Console, angular component. I wanted to write a new component using the zoneless feature of new angular library.

Click here for the demo. Live Demo.

GitHub.. Open Source code at GitHub.

NPMJS Repo.. NPM Package.

Note: Timelapse gif above, not the actual component.

To view the actual component Click here for the demo..

Install

npm install --save ngx-serial-console

Usage

Import the component in your app.ts or corresponding typescript file

@Component({
    import { NgxSerialConsole } from 'ngx-serial-console';

and import the library in app.ts or correspondint typescript fil

imports: [NgxSerialConsole],

Add following, in your component html file, to display the serial console component

<ngx-serial-console></ngx-serial-console>

Users can send strings on the serial input, using the input box at the bottom of the component. This is sent as plain text. On Arduino, you can use Serial library to read the input data from the user, as in the below example…

void loop() {

  if (Serial.available() > 0) {
    Serial.println("Listening for serial Input...");
    String input = Serial.readStringUntil('\n');
  }
}