Angular Series - 09 - Sending Actions Up: `@Output`, `EventEmitter`, and `emit()`

When a child component needs to tell the parent that something just happened, Angular uses an "Output".

Think of it like a walkie-talkie system. The parent component owns the master list of tasks. The child component is just holding one task to show on the screen. If the user clicks the child component, the child grabs its walkie-talkie and shouts, "Hey parent! The user just clicked task number 3!" The parent hears this message, updates its master list, and Angular automatically repaints the screen.

Here is the exact step-by-step flow of how this communication happens:

You might be wondering: Why don't we just write the code to update the task list directly inside the child component?

We use @Output because of a golden rule in software architecture: State Ownership. The child component should never directly manipulate the parent's main state. If every child component could secretly change the master data, your app would become a buggy nightmare to debug.

Instead, the child only announces what happened. The parent, who owns the data, receives the announcement and decides exactly how to update the real state. This keeps your architecture perfectly clean.