Angular - Understanding @Input and @Output Decorators

Angular is a widely-used framework for creating web applications, offering powerful features for component-based development. Two important decorators in Angular are '@Input' and '@Output'. These decorators facilitate communication between components. In this post, we'll explore these decorators and learn how to utilize them effectively.

@Input Decorator

The '@Input' decorator is employed to define an input property on a component, enabling the flow of data from a parent component to a child component. By utilizing '@Input', you can bind values to properties within a child component, allowing for dynamic data exchange.

To define an input property, simply add the '@Input()' decorator above the property declaration within the child component. Here's an example:

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

@Component({
  selector: 'child-component',
  template: `Child Component: {{ childProperty }}`
})
export class ChildComponent {
  @Input() childProperty: string;
}

In the parent component's template, you can bind a value to the 'childProperty' using property binding syntax:

<child-component [childProperty]="parentValue"></child-component>

In this code snippet, 'parentValue' represents a property or expression in the parent component that you wish to pass to the child component. The child component's 'childProperty' will automatically update whenever the 'parentValue' changes.

@Output Decorator

The '@Output' decorator is used to define an output property on a component, enabling a child component to emit events to its parent component. By employing '@Output', you can create custom events that the parent component can listen to and respond accordingly.

To define an output property, add the '@Output()' decorator above the property declaration within the child component and create an instance of the `EventEmitter` class. Here's an example:

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

@Component({
  selector: 'child-component',
  template: `
    <button (click)="emitEvent()">Click Me</button>
  `
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<string>();

  emitEvent() {
    this.customEvent.emit('Custom event emitted from child component');
  }
}

In the parent component's template, you can bind to the custom event and handle it using an event handler method:

<child-component (customEvent)="handleEvent($event)"></child-component>

Whenever the custom event is emitted from the child component, the 'handleEvent()' method in the parent component will be called. The data emitted can be accessed through the '$event' parameter.

Summary

The '@Input' and '@Output' decorators are crucial for establishing communication between components in Angular. '@Input' allows you to pass data from a parent component to a child component, while '@Output' enables a child component to emit custom events that the parent component can listen to and respond to accordingly.

By leveraging these decorators, you can build more flexible and reusable components within your Angular applications.

I hope this post helps you understand the '@Input' and '@Output' decorators in Angular. Happy coding!! 😊