How Angular Works

Angular Application Lifecycle

When a user opens your Angular app in the browser, here's what happens step by step:

1. The browser loads index.html — it contains just one custom tag: <app-root>.
2. main.ts runs and bootstraps AppModule.
3. Angular finds the root component (AppComponent) and renders its template into <app-root>.
4. Child components are discovered and rendered recursively, building the full component tree.
5. Angular's change detection engine watches for any data changes and updates the DOM automatically.

You never need to touch the document, querySelector, or manually update the page.

Component-Based Architecture

Think of your UI as a tree of Lego blocks. Each block (component) is self-contained — it has its own HTML template, CSS styles, and TypeScript logic. A parent component can pass data down to child components, and children can send events back up to parents.

Here's what a typical component tree looks like:

AppComponent

├── HeaderComponent

├── CourseListComponent

│   └── CourseCardComponent (repeated for each course)

└── FooterComponent

This one-directional flow keeps your app predictable and easy to debug.

Data Flow in Angular

• Parent → Child using @Input() — for example, passing a username down to a profile card.
• Child → Parent using @Output() and EventEmitter — for example, notifying the parent when a form is submitted.
• Component ↔ Template using [( )] data binding — keeping an input field in sync with a variable.
• Anywhere ↔ Anywhere using Services and Observables — sharing cart data across multiple pages without passing it through every component.