Output Decorator

Handling component output in Angular is a crucial aspect of component interaction, especially when building complex applications with a hierarchy of components. The @Output() decorator, used in conjunction with the EventEmitter class, enables child components to emit events that can be listened to by parent components. This mechanism allows for effective child-to-parent communication.

Basic Use of `@Output()` and `EventEmitter`

Importing and Setup:--

Import Output and EventEmitter from @angular/core.
Declare an EventEmitter property in the child component and decorate it with @Output().

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="emitEvent()">Click me</button>`
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<string>();
  
  emitEvent() {
    this.customEvent.emit('Some Data');
  }
}

Listening to the Event in Parent Component:--
- In the parent component's template, bind to the child component's event.
```

<app-child (customEvent)="handleEvent($event)"></app-child>
```
- Implement the handleEvent method in the parent component.
```
handleEvent(data: any) {
  console.log('Received event:', data);
}
```

Customizing the Emitted Event

The EventEmitter can emit any type of data (e.g., strings, numbers, objects).
It's a good practice to emit specific data relevant to the event.

Aliasing the Output Property

You can alias the output property for use in the parent component's template.
This is useful for improving readability or when the internal name of the output property does not suit external use.
```
@Output('aliasName') customEvent = new EventEmitter<any>();
```

Handling Multiple Outputs

A component can have multiple @Output() properties, each emitting different events.
This is useful for emitting different types of events from a child component.

`$event`

In Angular, $event is a special variable used in templates to represent the data emitted by an event. When you bind to an event in an Angular template, $event captures the output emitted by that event. It's commonly used in event binding to access the data passed by events, particularly in the context of component interaction or DOM events.

Usage in DOM Events

$event is also used in the context of standard DOM events, like click, input, etc.

For example, in a button click event:

<button (click)="doSomething($event)">Click me</button>

In this case, $event is a MouseEvent object, which contains information about the click event, such as the element that was clicked, the position of the mouse, etc.

Best Practices

Encapsulation: Keep the logic within the child component. The child should not be aware of what happens when the event is emitted.
Specificity: Emit specific, well-defined events. Avoid vague event names like onChange or update.
Single Responsibility: Each output event should correspond to a specific action or change in the child component.

Use Cases

Form Submission: Emit an event when a user submits a form in a child component.
State Changes: Notify a parent component of changes in the state of a child component (e.g., a toggle switch being turned on/off).
Inter-Component Communication: Facilitate communication between sibling components by emitting events to a common parent, which then delegates data or actions to other children.

Basic Use of @Output() and EventEmitter​

Customizing the Emitted Event​

Aliasing the Output Property​

Handling Multiple Outputs​

$event​

Usage in DOM Events​

Best Practices​

Use Cases​