{"id":18615072,"url":"https://github.com/andrewjbateman/angular-datastream-table","last_synced_at":"2026-05-03T10:35:22.510Z","repository":{"id":40994371,"uuid":"179143822","full_name":"AndrewJBateman/angular-datastream-table","owner":"AndrewJBateman","description":":clipboard: App to pass real-time data using pusher-js API data streaming. From Pusher.com tutorial BUILD A REALTIME TABLE WITH ANGULAR by Christian Nwamba (see readme link)","archived":false,"fork":false,"pushed_at":"2023-02-02T20:34:42.000Z","size":1579,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-04T16:51:03.654Z","etag":null,"topics":["angular","angular15","api-server","css3","html5","nodejs","pusher","pusher-api","pusher-channel","pusher-js","real-time","server-side-rendering","streaming-data"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-02T19:20:56.000Z","updated_at":"2023-02-01T19:16:57.000Z","dependencies_parsed_at":"2023-02-15T08:16:24.738Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/angular-datastream-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-datastream-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-datastream-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-datastream-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-datastream-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-datastream-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-datastream-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-datastream-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32566444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular15","api-server","css3","html5","nodejs","pusher","pusher-api","pusher-channel","pusher-js","real-time","server-side-rendering","streaming-data"],"created_at":"2024-11-07T03:28:01.103Z","updated_at":"2026-05-03T10:35:22.493Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular Datastream Table\n\n* App with realtime communication between app and server using a websocket-based [Pusher](https://pusher.com/) channel for notifications/updates etc.\n\n*** Note: to open web links in a new window use: _ctrl+click on link_**\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Datastream Table](#zap-angular-datastream-table)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* The pusher channel uses a publish/subscribe model so all subscribers to the channel will receive the update. See [Pusher documentation](https://pusher.com/docs) for more information.\n* The server.js file follows the [Twelve-Factor](https://12factor.net/) methodology for building software-as-a-service apps that:\n\n'_Use declarative formats for setup automation, to minimize time and cost for new developers joining the project;\nHave a clean contract with the underlying operating system, offering maximum portability between execution environments;\nAre suitable for deployment on modern cloud platforms, obviating the need for servers and systems administration;\nMinimize divergence between development and production, enabling continuous deployment for maximum agility;\nAnd can scale up without significant changes to tooling, architecture, or development practices._'\n\n## :camera: Screenshots\n\n![Example screenshot](./img/frontend-and-server.png)\n\n## :signal_strength: Technologies\n\n* [Angular v15](https://angular.io/)\n* [rxjs v7](http://reactivex.io/) observable streams for asynschronous programming.\n* [Pusher-js v8](https://pusher.com/) Real-time communication scalable features.\n* [Bootstrap v5](https://getbootstrap.com/). Links added to `angular.json \"styles\"`\n* [NgAlert v2](https://github.com/theo4u/ngAlert) alert component with different types of alert. Link added to `angular.json \"styles\"`.\n\n## :floppy_disk: Setup\n\n* Install dependencies using `npm i`\n* Get your own API key and Cluster name from [Pusher-js](https://pusher.com/) Sandbox Plan\n* Add Pusher API Key etc. to .env file\n* Add API_KEY \u0026 CLUSTER values to `environment.ts` \u0026 `environment.prod.ts`\n* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`\n* Open a second command terminal\n* Install nodemon globally if you don't have it already\n* Run `nodemon server.js` to run the server backend. Navigate to `http://localhost:2000/`. Restarts with changes\n* Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## :computer: Code Examples\n\n* Function to delete an employee record with alert message before using the '_actualDelete' function.\n\n```typescript\n  delete(employee: IEmployee) {\n    // show delete confirmation with ngAlert\n    this._ngAlert.push({\n      message: `\u003cstrong\u003eAre you sure!\u003c/strong\u003e you want to delete this employee with name \u003cstrong\u003e${employee.name}\u003c/strong\u003e`,\n      type: MessageType.warning,\n      buttons: [\n        {\n          label: 'Continue',\n          action: () =\u003e {\n            this._actualDelete(employee);\n          },\n          css: 'btn btn-danger'\n        }\n      ]\n    });\n  }\n\n```\n\n## :cool: Features\n\n* Forms created using [Angular's reactive forms](https://angular.io/api/forms/ReactiveFormsModule).\n* Utility/helper classes used from [Bootstrap v5](https://getbootstrap.com/).\n* real-time data and functionality using [Pusher event-based API 'Pusher Channel'](https://pusher.com/).\n* working local server backend.\n* Data access services delegated to separate service components.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working front and backend. UI adds employees to the list. Employees can be added \u0026 deleted successfully but the edit component is not coded so not possible to edit employee records.\n* To-Do: Look at employee edit function. Customise app and add functionality. Consider currency pull-down menu for salary input.\n\n## :clap: Inspiration\n\n* [Christian Nwamba's tutorial: BUILD A REALTIME TABLE WITH ANGULAR](https://pusher.com/tutorials/realtime-table-angular),\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-datastream-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-datastream-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-datastream-table/lists"}