{"id":1141,"date":"2025-02-12T18:24:30","date_gmt":"2025-02-12T18:24:30","guid":{"rendered":"https:\/\/www.bleuio.com\/blog\/?p=1141"},"modified":"2025-02-12T19:46:35","modified_gmt":"2025-02-12T19:46:35","slug":"using-bleuio-with-angular-typescript-via-web-serial-api","status":"publish","type":"post","link":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/","title":{"rendered":"Using BleuIO with Angular &#038; TypeScript via Web Serial API"},"content":{"rendered":"\n<p>In modern web development, Bluetooth Low Energy (BLE) integration is becoming increasingly important for IoT applications. With the <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Serial_API\">Web Serial API<\/a><\/strong>, we can now directly communicate with hardware devices like <strong>BleuIO<\/strong> using just a browser, eliminating the need for native drivers or middleware.<\/p>\n\n\n\n<p>In this tutorial, we will demonstrate how to use <strong><a href=\"https:\/\/angular.dev\/\">Angular 19<\/a><\/strong> and <strong>TypeScript<\/strong> to communicate with a <strong><a href=\"https:\/\/www.bleuio.com\/bluetooth-low-energy-usb-ssd005.php\">BleuIO USB Dongle<\/a><\/strong> via <strong>Web Serial API<\/strong>. We will build a simple web application that connects to BleuIO, sends <strong>AT commands<\/strong>, and displays responses in real time.<\/p>\n\n\n\n<p>This approach is beneficial because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>No additional backend services are required<\/strong>\u2014everything runs directly in the browser.<\/li>\n\n\n\n<li><strong>Simplicity<\/strong>\u2014Web Serial API allows communication with serial devices in JavaScript\/TypeScript without native code.<\/li>\n\n\n\n<li><strong>Cross-platform compatibility<\/strong>\u2014Works on any OS with <strong>Google Chrome<\/strong> or <strong>Microsoft Edge<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use Angular &amp; TypeScript?<\/h3>\n\n\n\n<p>Angular is a powerful framework for building <strong>scalable<\/strong>, <strong>maintainable<\/strong>, and <strong>modern<\/strong> web applications. <strong><a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a><\/strong>, which is the foundation of Angular, brings type safety and better tooling, making development smoother and reducing runtime errors.<\/p>\n\n\n\n<p>By using <strong>Angular 19<\/strong>, we ensure that our application is built on the latest and most optimized framework version, taking advantage of <strong>standalone components<\/strong> and <strong>improved performance features<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Up the Angular Project<\/h3>\n\n\n\n<p>To get started, ensure you have <strong>Node.js<\/strong> and <strong>Angular CLI<\/strong> installed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create an Angular Project<\/h4>\n\n\n\n<p>Run the following command to generate a new Angular 19 project:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>new angular-bleuio --strict<br>cd angular-bleuio<br><\/code><\/pre>\n\n\n\n<p>Choose <strong>No<\/strong> for routing and <strong>CSS<\/strong> as the styling option.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">add <strong>Bootstrap<\/strong> to <code>styles.css<\/code>:<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css');<\/code><\/pre>\n\n\n\n<p>This ensures our application has a clean, professional UI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building the BleuIO Web Serial Connection<\/h3>\n\n\n\n<p>We will now implement the core functionality:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Connect to BleuIO via Web Serial API.<\/strong><\/li>\n\n\n\n<li><strong>Send AT commands and receive responses.<\/strong><\/li>\n\n\n\n<li><strong>Display formatted responses using delimiters.<\/strong><\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Creating the Angular Component<\/h4>\n\n\n\n<p>In <code>src\/app\/app.component.ts<\/code>, replace the contents with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\n\n@Component({\n  selector: 'app-root',\n  standalone: true, \/\/\n  imports: &#91;FormsModule],\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css'],\n})\nexport class AppComponent {\n  port: any | undefined;\n  writer: WritableStreamDefaultWriter | undefined;\n  reader: ReadableStreamDefaultReader | undefined;\n  command: string = '';\n  response: string = 'Not connected.';\n\n  async connectToBleuIO() {\n    try {\n      if (!('serial' in navigator)) {\n        this.response = 'Web Serial API not supported in this browser.';\n        return;\n      }\n\n      this.port = await (navigator as any).serial.requestPort();\n      await this.port.open({ baudRate: 115200 });\n\n      this.response = 'Connected to BleuIO.';\n      this.writer = this.port.writable?.getWriter();\n      this.reader = this.port.readable?.getReader();\n\n      this.readData();\n    } catch (error) {\n      console.error('Connection failed:', error);\n      this.response = 'Failed to connect.';\n    }\n  }\n\n  async sendCommand() {\n    if (!this.port || !this.writer || !this.command) {\n      this.response = 'Not connected or empty command.';\n      return;\n    }\n\n    try {\n      \/\/ Reset the response before sending a new command\n      this.response = 'Waiting for response...';\n\n      \/\/ Clear any old responses before sending new data\n      if (this.reader) {\n        await this.reader.cancel();\n        this.reader.releaseLock();\n        this.reader = this.port.readable?.getReader(); \/\/ Reinitialize reader\n      }\n\n      \/\/ Send the AT command\n      const encoder = new TextEncoder();\n      await this.writer.write(encoder.encode(this.command + '\\r\\n'));\n\n      this.response = 'Command sent: ' + this.command;\n      this.readData(); \/\/ Start reading the new response\n    } catch (error) {\n      console.error('Send error:', error);\n      this.response = 'Error sending command.';\n    }\n  }\n\n  async readData() {\n    if (!this.reader) return;\n\n    const decoder = new TextDecoder();\n    let fullResponse = '';\n\n    try {\n      while (true) {\n        const { value, done } = await this.reader.read();\n        if (done) break;\n\n        let textChunk = decoder.decode(value);\n        fullResponse += textChunk; \/\/ Append new data to the response\n\n        this.response = fullResponse\n          .replace(\/(\\w)\\.(\\s&#91;A-Z])\/g, '$1.\\n$2') \/\/ Add newline after full stops (but not inside numbers)\n          .replace(\n            \/(BleuIO|Firmware Version|Peripheral role|Central role|Not Connected|Not Advertising)\/g,\n            '\\n$1'\n          ); \/\/ New line before keywords\n      }\n    } catch (error) {\n      console.error('Read error:', error);\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Creating the UI<\/h3>\n\n\n\n<p>Modify <code>src\/app\/app.component.html<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container text-center mt-5\"&gt;\n  &lt;h1 class=\"mb-4 text-primary\"&gt;\n    Angular &amp; TypeScript: Connect to BleuIO via Serial port\n  &lt;\/h1&gt;\n\n  &lt;!-- Connect Button --&gt;\n  &lt;button class=\"btn btn-primary mb-3\" (click)=\"connectToBleuIO()\"&gt;\n    Connect to BleuIO\n  &lt;\/button&gt;\n\n  &lt;div class=\"input-group mb-3 w-50 mx-auto\"&gt;\n    &lt;input\n      type=\"text\"\n      &#91;(ngModel)]=\"command\"\n      class=\"form-control\"\n      placeholder=\"Enter AT Command\"\n    \/&gt;\n    &lt;button class=\"btn btn-success\" (click)=\"sendCommand()\"&gt;\n      Send Command\n    &lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;h3 class=\"mt-4\"&gt;Response:&lt;\/h3&gt;\n\n  &lt;div\n    class=\"border p-3 w-75 mx-auto bg-light rounded shadow-sm\"\n    style=\"white-space: pre-line\"\n  &gt;\n    {{ response }}\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Update <code>src\/main.ts<\/code><\/h3>\n\n\n\n<p>Replace its contents with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { bootstrapApplication } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app\/app.component';\nimport { importProvidersFrom } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\n\nbootstrapApplication(AppComponent, {\n  providers: &#91;importProvidersFrom(FormsModule)],\n}).catch((err) =&gt; console.error(err));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Running the Project<\/h3>\n\n\n\n<p>Start the Angular app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng serve<\/code><\/pre>\n\n\n\n<p>Open <strong>Google Chrome<\/strong> and go to <code>http:\/\/localhost:4200\/<\/code>.<br>Test by clicking <strong>&#8220;Connect to BleuIO&#8221;<\/strong>, entering an <strong>AT command<\/strong>, and clicking <strong>&#8220;Send Command&#8221;<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Complete Source Code<\/h3>\n\n\n\n<p>Find the <strong>full source code<\/strong> on <strong>GitHub<\/strong>:<br>\ud83d\udd17 <strong><a href=\"https:\/\/github.com\/smart-sensor-devices-ab\/angular-bleuio\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Repository<\/a><\/strong> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"551\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-1024x551.png\" alt=\"\" class=\"wp-image-1142\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-1024x551.png 1024w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-300x161.png 300w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-768x413.png 768w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-1536x826.png 1536w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/image-1-2048x1101.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Use Cases: Why This is Helpful<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This tutorial is beneficial for developers who:<\/li>\n\n\n\n<li> Want a <strong>simple, browser-based<\/strong> way to communicate with BleuIO.<\/li>\n\n\n\n<li> Need a <strong>cross-platform solution<\/strong> that works on Windows, macOS, and Linux.<\/li>\n\n\n\n<li> Are building <strong>IoT applications<\/strong> that require BLE communication.<\/li>\n\n\n\n<li> Want to use <strong>Angular &amp; TypeScript<\/strong> for a <strong>scalable frontend solution<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>This tutorial demonstrates how to use <strong>Angular 19, TypeScript, and the Web Serial API<\/strong> to communicate with <strong>BleuIO<\/strong>. The project is lightweight, scalable, and works <strong>entirely in the browser<\/strong>\u2014perfect for IoT applications! <\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In modern web development, Bluetooth Low Energy (BLE) integration is becoming increasingly important for IoT applications. With the Web Serial API, we can now directly communicate with hardware devices like BleuIO using just a browser, eliminating the need for native drivers or middleware. In this tutorial, we will demonstrate how to use Angular 19 and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-1141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bleuio","category-bleuio-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using BleuIO with Angular &amp; TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using BleuIO with Angular &amp; TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"og:description\" content=\"In modern web development, Bluetooth Low Energy (BLE) integration is becoming increasingly important for IoT applications. With the Web Serial API, we can now directly communicate with hardware devices like BleuIO using just a browser, eliminating the need for native drivers or middleware. In this tutorial, we will demonstrate how to use Angular 19 and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/\" \/>\n<meta property=\"og:site_name\" content=\"BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-12T18:24:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-12T19:46:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"BleuIO\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/\"},\"author\":{\"name\":\"BleuIO\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"headline\":\"Using BleuIO with Angular &#038; TypeScript via Web Serial API\",\"datePublished\":\"2025-02-12T18:24:30+00:00\",\"dateModified\":\"2025-02-12T19:46:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/\"},\"wordCount\":430,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bleuio-with-angular-and-typescript.jpg\",\"articleSection\":[\"BleuIO\",\"BleuIO tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/\",\"name\":\"Using BleuIO with Angular & TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bleuio-with-angular-and-typescript.jpg\",\"datePublished\":\"2025-02-12T18:24:30+00:00\",\"dateModified\":\"2025-02-12T19:46:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bleuio-with-angular-and-typescript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bleuio-with-angular-and-typescript.jpg\",\"width\":750,\"height\":450,\"caption\":\"bleuio with angular and typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/using-bleuio-with-angular-typescript-via-web-serial-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using BleuIO with Angular &#038; TypeScript via Web Serial API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\",\"name\":\"BleuIO - Create Bluetooth Low Energy application\",\"description\":\"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\",\"name\":\"BleuIO\",\"sameAs\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/author\\\/biadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using BleuIO with Angular & TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/","og_locale":"en_US","og_type":"article","og_title":"Using BleuIO with Angular & TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application","og_description":"In modern web development, Bluetooth Low Energy (BLE) integration is becoming increasingly important for IoT applications. With the Web Serial API, we can now directly communicate with hardware devices like BleuIO using just a browser, eliminating the need for native drivers or middleware. In this tutorial, we will demonstrate how to use Angular 19 and [&hellip;]","og_url":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/","og_site_name":"BleuIO - Create Bluetooth Low Energy application","article_published_time":"2025-02-12T18:24:30+00:00","article_modified_time":"2025-02-12T19:46:35+00:00","og_image":[{"width":750,"height":450,"url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg","type":"image\/jpeg"}],"author":"BleuIO","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#article","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/"},"author":{"name":"BleuIO","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"headline":"Using BleuIO with Angular &#038; TypeScript via Web Serial API","datePublished":"2025-02-12T18:24:30+00:00","dateModified":"2025-02-12T19:46:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/"},"wordCount":430,"commentCount":0,"image":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg","articleSection":["BleuIO","BleuIO tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/","url":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/","name":"Using BleuIO with Angular & TypeScript via Web Serial API - BleuIO - Create Bluetooth Low Energy application","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#primaryimage"},"image":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg","datePublished":"2025-02-12T18:24:30+00:00","dateModified":"2025-02-12T19:46:35+00:00","author":{"@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"breadcrumb":{"@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#primaryimage","url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg","contentUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2025\/02\/bleuio-with-angular-and-typescript.jpg","width":750,"height":450,"caption":"bleuio with angular and typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bleuio.com\/blog\/using-bleuio-with-angular-typescript-via-web-serial-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bleuio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using BleuIO with Angular &#038; TypeScript via Web Serial API"}]},{"@type":"WebSite","@id":"https:\/\/www.bleuio.com\/blog\/#website","url":"https:\/\/www.bleuio.com\/blog\/","name":"BleuIO - Create Bluetooth Low Energy application","description":"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bleuio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80","name":"BleuIO","sameAs":["https:\/\/www.bleuio.com\/blog"],"url":"https:\/\/www.bleuio.com\/blog\/author\/biadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/1141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/comments?post=1141"}],"version-history":[{"count":2,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/1141\/revisions"}],"predecessor-version":[{"id":1145,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/1141\/revisions\/1145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media\/1148"}],"wp:attachment":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media?parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/categories?post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/tags?post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}