⚡ Angular Observables

• 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.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Observables
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• "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."

📷 Screenshots

.

📶 Technologies

• Angular v15
• RxJS Library v7 used to handle datastreams and propagation of change using observables.

💾 Setup

• Install dependencies using npm i
• Run ng serve for a dev server.
• Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files

💻 Code Examples

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit, OnDestroy {
  subscription: Subscription;

  constructor() { }

  ngOnInit() {
    const myNumbers = interval(1000);
    this.subscription = myNumbers.subscribe(val => console.log(val));
  }

  // stop counting when user leaves the page
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

🆒 Features

• 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 functionngOnDestroy() is working correctly.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• CodingandCaffeine: Angular RxJS Observables. Understanding the approach.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]