# Angular Fundamentals (Basics)

## Overview
This project is a comprehensive deep-dive into the **Angular Framework**. It covers everything from basic component architecture to advanced features like Signals, PWA, and Internationalization, following the official Angular "Getting Started" and "Tour of Heroes" roadmap.

---

### 1. Core Architecture
Angular is built on a hierarchy of **Components** and **Services**.
- **Components:** Manage the view and logic (HTML/CSS/TS).
- **Standalone Components:** Modern Angular approach to reduce boilerplate code without needing `NgModules`.
- **Lifecycle Hooks:** Managing the component from birth (`ngOnInit`) to death (`ngOnDestroy`).

### 2. Templates & Data Binding
How the logic (TS) and the view (HTML) communicate:
- **Interpolation:** `{{ title }}` for text.
- **Property Binding:** `[disabled]="isInvalid"` to control attributes.
- **Event Binding:** `(click)="save()"` to handle user actions.
- **Two-way Binding:** `[(ngModel)]="name"` for real-time form syncing.
- **Pipes:** Transforming data in templates (e.g., `date`, `currency`, `json`).

### 3. Directives & Control Flow
- **Structural:** `*ngIf`, `*ngFor`, and the new **Built-in Control Flow** (`@if`, `@for`).
- **Attribute:** Changing the appearance or behavior of an element (e.g., `ngClass`, `ngStyle`).

### 4. Dependency Injection (DI) & Services
- **Services:** Centralized logic for data fetching and business rules.
- **Injectable:** Using the `@Injectable()` decorator to make services available project-wide.
- **Providers:** Defining how the DI system creates the service.

### 5. Navigation & Forms
- **Routing:** Single Page Application (SPA) navigation using `RouterModule`. Includes lazy loading for performance.
- **Reactive Forms:** Scalable, performant, and easy to test (Strictly Typed).
- **Template-driven Forms:** Simple, easy-to-use forms for basic requirements.

### 6. HTTP Client & Server Communication
- **HttpClient:** Making REST API calls (GET, POST, PUT, DELETE).
- **Interceptors:** Modifying requests (like adding Auth Tokens) globally.
- **Observables (RxJS):** Handling asynchronous data streams.

---

### 7. Advanced Concepts
- **Signals:** The future of Angular reactivity (fine-grained updates).
- **Change Detection:** Optimization using `OnPush` strategy and `Zone.js`.
- **Hydration:** Improving Server-Side Rendering (SSR) performance.
- **PWA (Progressive Web Apps):** Service workers and offline support.
- **Internationalization (i18n):** Translating the app for global users.

---

### Developer Workflow & Tools
- **Angular CLI:** `ng serve`, `ng build`, `ng test`, `ng generate`.
- **Testing:** Unit testing with Jasmine/Karma and code coverage analysis.
- **DevTools:** Debugging component structures and change detection.

---

### Learning Checklist
- [x] Component Interaction (@Input / @Output)
- [x] Content Projection (`<ng-content>`)
- [x] Attribute & Structural Directives
- [x] Reactive Form Validation
- [x] Async Data with Pipes
- [x] Signal-based Reactivity