Angular - 5.6-Bind custom events

Components do not only consume data from above through @Input() properties — they also need to talk back to their parents. Angular's tool for that job is @Output(): a custom event emitted by the child component that any parent template can listen to with the regular event binding syntax.

The pattern uses an EventEmitter typed with the payload the child will send. The child declares the property, decorates it with @Output() and calls .emit(value) whenever something interesting happens. On the parent side, the event name is bound exactly like a native DOM event such as (click):

// child component
@Output() serverCreated = new EventEmitter<{ name: string; content: string }>();

onCreate() {
  this.serverCreated.emit({ name: 'New server', content: 'Hello' });
}

// parent template
<app-cockpit (serverCreated)="onServerAdded($event)"></app-cockpit>

Why @Output matters

Without the @Output() decorator the parent cannot subscribe to the emitter from the template, even if the property is public on the class. The decorator is what tells Angular to expose the emitter as a bindable output. The pair @Input()/@Output() forms the canonical unidirectional data flow in Angular:

• @Input() — data flowing down from the parent to the child.
• @Output() — events flowing up from the child to the parent.
• The parent stays in charge of the application state and reacts to children events.

This pattern keeps components decoupled: the child does not know who is listening, and the parent does not need to reach into the child's internals. It is the foundation for every dynamic interaction we will build throughout the course.