🔄 Angular Observable State

---

📑 Table of Contents

• 🔄 Angular Observable State

  • 🌐 Live Demo
  • 📖 Description
  • ⚙️ System Requirements
  • 🚀 Project Installation
  • ▶️ Run the Project
  • 🧠 Project Architecture
  • ✨ Features
  • 🛠 Technologies Used
  • 📁 Project Structure
  • 🔥 Best Practices Implemented
  • 🎯 Project Goal
  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/angular-observable-state/

---

📖 Description

Note

Angular 12 application that demonstrates state management using RxJS and BehaviorSubject to share information between components and pages.

The project showcases reactive programming concepts, centralized state management, component communication, and Angular architecture best practices through a simple but scalable implementation.

---

⚙️ System Requirements

Before running the project, make sure you have installed:

• 📦 Node.js: v12.14.x – v14.x (recommended: v14.21.3 LTS)
• 📦 npm: v6+
• 🅰️ Angular CLI: v12.x

---

🔍 Verify Installed Versions

Run the following commands in your terminal:

node -v
npm -v
ng version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone git@github.com:alobuuls/angular-observable-state.git

cd angular-observable-state

2️⃣ Install dependencies

npm install

---

▶️ Run the Project

Start the development server:

ng serve

Then open:

http://localhost:4200

---

🧠 Project Architecture

The application follows a simple state management architecture based on RxJS observables and a centralized service.

📦 State Service

Responsible for:

• Global state management
• BehaviorSubject implementation
• State updates
• Observable subscriptions
• Component communication

📦 Page 1

Responsible for:

• State emission
• User input handling
• Updating shared data

📦 Page 2

Responsible for:

• State subscription
• Reactive data display
• Observable consumption

📦 Page 3

Responsible for:

• Reading shared state
• Updating shared state
• Bidirectional communication

📦 Main Module

Responsible for:

• Application bootstrap
• Route configuration
• Dependency injection

---

✨ Features

• 🔄 Shared state between pages
• 📡 Communication with BehaviorSubject
• ⚡ Reactive programming with RxJS
• 🎯 Observable subscriptions
• 📦 Centralized state management
• 🧩 Decoupled component communication
• 🌐 Angular Forms with ngModel
• 🚀 Real-time data updates
• 🧠 Simple state management pattern
• 🎯 Strong typing with TypeScript

---

🛠 Technologies Used

Technology	Purpose
Angular 12	Framework
TypeScript	Application Logic
RxJS	Reactive Programming
BehaviorSubject	State Management
Angular Forms	Form Handling
Angular Router	Navigation
HTML5	Structure
CSS3	Styling

---

📁 Project Structure

angular-observable-state/

├── src/
│
├── app/
│   │
│   ├── pages/
│   │   ├── page-1/
│   │   ├── page-2/
│   │   └── page-3/
│   │
│   ├── services/
│   │   └── state.service.ts
│   │
│   ├── app.component.ts
│   ├── app.module.ts
│   └── app.routes.ts
│
├── environments/
│   ├── environment.ts
│   └── environment.prod.ts
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

---

🔥 Best Practices Implemented

• Centralized state management
• Reactive programming with RxJS
• Separation of concerns
• Observable pattern implementation
• Service-based architecture
• Decoupled component communication
• Strong typing with TypeScript
• Dependency injection
• Scalable state management structure
• Angular modular organization

---

🎯 Project Goal

Practice and strengthen Angular state management concepts through the implementation of a reactive application:

• RxJS Fundamentals
• BehaviorSubject
• Observable Pattern
• Shared State Management
• Component Communication
• Angular Services
• Dependency Injection
• Reactive Programming
• TypeScript
• Front-End Architecture

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.