The Observer Design Pattern

class WeatherStation {
    constructor() {
        this.observers = [];
        this.weatherData = { temperature: 0, humidity: 0, pressure: 0 };
    }

    addObserver(observer) {
        this.observers.push(observer);
    }

    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    }

    notifyObservers() {
        for (const observer of this.observers) {
            observer.update(this.weatherData);
        }
    }

    setWeatherData(newWeatherData) {
        this.weatherData = { ...this.weatherData, ...newWeatherData };
        this.notifyObservers();
    }
}

class WeatherAlert {
    constructor(alertType) {
        this.alertType = alertType;
    }

    update(weatherData) {
        // Basic demonstration: you might have more complex logic here in a real app
        console.log(`Weather Alert [${this.alertType}]: 
           New weather data received!`, weatherData);
    }
}

// Example usage
const weatherStation = new WeatherStation();

const rainAlert = new WeatherAlert("Rain");
const freezeAlert = new WeatherAlert("Freeze");

weatherStation.addObserver(rainAlert);
weatherStation.addObserver(freezeAlert);

weatherStation.setWeatherData({ temperature: 25, humidity: 80, pressure: 1013 });
// Weather Alert [Rain]: New weather data received! 
// { temperature: 25, humidity: 80, pressure: 1013 }
// Weather Alert [Freeze]: New weather data received! 
// { temperature: 25, humidity: 80, pressure: 1013 }

weatherStation.setWeatherData({ temperature: -1, humidity: 80, pressure: 1010 });
// Weather Alert [Rain]: New weather data received! 
// { temperature: -1, humidity: 80, pressure: 1010 }
// Weather Alert [Freeze]: New weather data received! 
// { temperature: -1, humidity: 80, pressure: 1010 }

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartItems: any[] = [];
  private cartSubject = new BehaviorSubject(this.cartItems);

  addToCart(item: any): void {
    this.cartItems.push(item);
    this.cartSubject.next(this.cartItems);
  }

  getCartObservable(): Observable<any[]> {
    return this.cartSubject.asObservable();
  }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CartService } from './cart.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-cart',
  template: `
    <h2>Your Cart</h2>
    <ul>
      <li *ngFor="let item of cartItems">{{ item.name }}</li>
    </ul>
  `
})
export class CartComponent implements OnInit, OnDestroy {
  cartItems: any[] = [];
  cartSubscription!: Subscription;

  constructor(private cartService: CartService) {}

  ngOnInit(): void {
    this.cartSubscription = this.cartService.getCartObservable().subscribe(items => {
      this.cartItems = items;
    });
  }

  ngOnDestroy(): void {
    this.cartSubscription.unsubscribe();
  }
}

import { Component } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-add-product',
  template: `
    <button (click)="addItem()">Add Item to Cart</button>
  `
})
export class AddProductComponent {
  constructor(private cartService: CartService) {}

  addItem(): void {
    const newItem = { name: `Item ${Math.floor(Math.random() * 100)}` };
    this.cartService.addToCart(newItem);
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

  login(): void {
    // Authentication logic (e.g., API call) would be here...
    this.isAuthenticatedSubject.next(true);
  }

  logout(): void {
    // Logout logic would be here...
    this.isAuthenticatedSubject.next(false);
  }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthService } from './auth.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-header',
  template: `
    <ng-container *ngIf="isAuthenticated; else loggedOutTemplate">
      <p>Welcome, User!</p>
    </ng-container>
    <ng-template #loggedOutTemplate>
      <p>Please log in.</p>
    </ng-template>
  `
})
export class HeaderComponent implements OnInit, OnDestroy {
  isAuthenticated: boolean = false;
  private authSubscription!: Subscription;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.authSubscription = this.authService.isAuthenticated$.subscribe(
      isAuthenticated => {
        this.isAuthenticated = isAuthenticated;
      }
    );
  }

  ngOnDestroy(): void {
    this.authSubscription.unsubscribe();
  }
}

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login-form',
  template: `
    <button (click)="login()">Login</button>
    <button (click)="logout()">Logout</button>
  `
})
export class LoginFormComponent {
  constructor(private authService: AuthService) {}

  login(): void {
    this.authService.login();
  }

  logout(): void {
    this.authService.logout();
  }
}