{"id":18615049,"url":"https://github.com/andrewjbateman/angular-observables","last_synced_at":"2026-04-30T13:31:31.408Z","repository":{"id":36954861,"uuid":"161780666","full_name":"AndrewJBateman/angular-observables","owner":"AndrewJBateman","description":":clipboard: This Angular project uses the Observables to stop a process by using ngOnDestroy to avoid memory leak if a page process is left running when the web page is exited.","archived":false,"fork":false,"pushed_at":"2023-02-04T06:37:32.000Z","size":1511,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-05T05:14:08.889Z","etag":null,"topics":["angular","angular-observables","angular15","html5","memory-leak","ngondestroy","observables","rxjs","typescript4"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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":"2018-12-14T12:16:45.000Z","updated_at":"2022-12-29T19:54:09.000Z","dependencies_parsed_at":"2023-02-15T11:45:53.435Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/angular-observables","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-observables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-observables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-observables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-observables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-observables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-observables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-observables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32466333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"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","angular-observables","angular15","html5","memory-leak","ngondestroy","observables","rxjs","typescript4"],"created_at":"2024-11-07T03:27:57.339Z","updated_at":"2026-04-30T13:31:31.388Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular Observables\n\n* This project uses RxJS observables in Angular to stop a process by using ngOnDestroy to avoid memory leak if a page process is left running when the web page is exited.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-observables?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-observables?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-observables?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-observables?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Observables](#zap-angular-observables)\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 observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems. Observables, help JavaScript as a language integrate the observer design pattern.\"\n\n## :camera: Screenshots\n\n![Example screenshot](./img/observables.png).\n\n## :signal_strength: Technologies\n\n* [Angular v15](https://angular.io/)\n* [RxJS Library v7](https://angular.io/guide/rx-library) used to handle datastreams and propagation of change using observables.\n\n## :floppy_disk: Setup\n\n* Install dependencies using `npm i`\n* Run `ng serve` for a dev server.\n* Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files\n\n## :computer: Code Examples\n\n```typescript\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { interval, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.component.html',\n  styleUrls: ['./home.component.sass']\n})\nexport class HomeComponent implements OnInit, OnDestroy {\n  subscription: Subscription;\n\n  constructor() { }\n\n  ngOnInit() {\n    const myNumbers = interval(1000);\n    this.subscription = myNumbers.subscribe(val =\u003e console.log(val));\n  }\n\n  // stop counting when user leaves the page\n  ngOnDestroy() {\n    this.subscription.unsubscribe();\n  }\n}\n\n```\n\n## :cool: Features\n\n* When the user clicks on the 'Home' link the counter starts counting up every second. If the user clicks on 'User 1' or 'User 2' then the counting stops. This demonstrates that the Angular function`ngOnDestroy()` is working correctly.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working.\n* To-Do: Nothing\n\n## :clap: Inspiration\n\n* [CodingandCaffeine: Angular RxJS Observables. Understanding the approach](https://www.youtube.com/watch?v=R7Y8k8mHEeA).\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-observables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-observables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-observables/lists"}