🔄 Angular Observables State Pattern

---

📑 Table of Contents

• 🔄 Angular Observables State Pattern

  • 🌐 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-observables-state-pattern/

---

📖 Description

Note

Angular 12 application that demonstrates multiple component communication patterns and state management techniques using RxJS and BehaviorSubject.

The project explores communication through @Input, @Output, shared services, manual subscriptions, and the Async Pipe while following Angular best practices and reusable component architecture.

---

⚙️ 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-observables-state-pattern.git

cd angular-observables-state-pattern

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 modular communication architecture focused on RxJS observables and reusable Angular components.

📦 State Service

Responsible for:

• Shared state management
• BehaviorSubject implementation
• Observable streams
• State updates
• Component synchronization

📦 Page One

Responsible for:

• Data emission
• State updates
• Parent-child communication

📦 Page Two

Responsible for:

• Manual observable subscriptions
• Subscription lifecycle management
• Reactive data consumption

📦 Page Three

Responsible for:

• Async Pipe implementation
• Reactive state updates
• Observable-based rendering

📦 Form Component

Responsible for:

• User input management
• Event emission
• Reusable form logic

📦 Card Component

Responsible for:

• Data presentation
• Reusable UI rendering
• Input-based communication

---

✨ Features

• 🔄 Shared state with BehaviorSubject
• 📡 Observable-based communication
• 📤 @Output event emission
• 📥 @Input property binding
• ⚡ Async Pipe implementation
• 🔔 Manual subscription management
• 🧩 Reusable Angular components
• 🧠 Reactive state updates
• 📦 Service-based architecture
• 🎯 Strong typing with TypeScript
• 🚀 Component communication patterns

---

🛠 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-observables-state-pattern/

├── src/
│
├── app/
│   │
│   ├── components/
│   │   ├── card/
│   │   └── form/
│   │
│   ├── pages/
│   │   ├── page-one/
│   │   ├── page-two/
│   │   └── page-three/
│   │
│   ├── services/
│   │   └── state.service.ts
│   │
│   ├── interfaces/
│   │   └── data.interface.ts
│   │
│   ├── routes.ts
│   └── app.module.ts
│
├── environments/
│   ├── environment.ts
│   └── environment.prod.ts
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

---

🔥 Best Practices Implemented

• Reactive programming with RxJS
• Centralized state management
• Separation of concerns
• Component communication patterns
• Smart use of Async Pipe
• Subscription lifecycle management
• Strong typing with TypeScript interfaces
• Reusable component architecture
• Service abstraction
• Scalable Angular organization

---

🎯 Project Goal

Practice and strengthen Angular communication and state management concepts through the implementation of different reactive patterns:

• RxJS Fundamentals
• BehaviorSubject
• Shared State Management
• @Input / @Output Communication
• Async Pipe
• Observable Subscriptions
• Component Architecture
• Angular Services
• Dependency Injection
• Front-End Architecture

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.