@Input and @Output Decorators in Angular

Angular is a popular JavaScript framework for building web applications. It provides many features that make it easier to build applications, such as two-way data binding, dependency injection, and a component-based architecture. In this article, we will discuss the @Input and @Output decorators in Angular.

@Input Decorator

The @Input decorator is used to pass data from a parent component to a child component. It allows you to pass values from a parent component to a child component by binding them. This is useful when you want to share data between components, such as when you have a parent component that needs to pass data to a child component.

To use the @Input decorator, you need to declare a property in the child component and annotate it with the @Input decorator. Then, you can bind the property in the parent component to the child component by using the property's name. For example, let's say you have a parent component that needs to pass data to a child component. The parent component could look like this:

<app-child [data]=”value”></app-child>

And the child component could look like this:

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

@Component({
  selector: 'app-child',
  template: '<h1>{{ data }}</h1>'
})
export class ChildComponent {
  @Input() data: string;
}

@Output Decorator

The @Output decorator is used to pass data from a child component to a parent component. It allows you to emit events from a child component that can be listened to by a parent component. This is useful when you want to notify a parent component of changes in a child component, such as when a user performs an action in the child component.

To use the @Output decorator, you need to declare an EventEmitter property in the child component and annotate it with the @Output decorator. Then, you can emit events from the child component by calling the emit method on the EventEmitter property. For example, let's say you have a child component that needs to notify a parent component of a change. The child component could look like this:

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

@Component({
  selector: 'app-child',
  template: '<button (click)=”onClick()”>Click Me</button>'
})
export class ChildComponent {
  @Output() change = new EventEmitter<void>();

  onClick() {
    this.change.emit();
  }
}

And the parent component could look like this:

<app-child (change)=”onChange()”></app-child>

Conclusion

The @Input and @Output decorators in Angular allow you to pass data between components and emit events from components, making it easier to build complex applications. By understanding how to use these decorators, you can better structure your Angular applications and make them more maintainable.