Beyond the Basics: The Angular Component Ecosystem
Understanding the syntax of an Angular component is just the first step. To truly master the framework, you must understand how components interact, encapsulate styles, and manage their own lifecycle.
View Encapsulation: The Shadow DOM
One of Angular's most powerful features is **View Encapsulation**. By default, CSS defined in a component's `styleUrls` file does not leak out to the rest of the application, nor do global styles easily bleed in.
Angular achieves this by emulating the Shadow DOM. It automatically attaches unique attributes (like `_ngcontent-c1`) to your HTML elements and modifies your CSS selectors to match only those attributes. This means you can use generic class names like `.card` in every component without fear of collision.
Data Binding and Interaction
Components rarely exist in isolation. They communicate via a strict API:
⬇️ Input (Props)
@Input() userData: User;Data flows *down* from parent to child using property binding `[userData]="user"`.
⬆️ Output (Events)
@Output() onSave = new EventEmitter();Events flow *up* from child to parent using event binding `(onSave)="save($event)"`.
Lifecycle Hooks
Angular gives you visibility into key moments of a component's life. The most common hook is `ngOnInit`.
Best Practice: Never fetch data inside the `constructor`. The constructor is for JavaScript class initialization (Dependency Injection). Use `ngOnInit` for Angular-specific setup logic like API calls.
