DEV Community

Cover image for @Input and @Output Decorators in Angular
Ilyoskhuja
Ilyoskhuja

Posted on

@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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

@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();
  }
}

Enter fullscreen mode Exit fullscreen mode

And the parent component could look like this:

<app-child (change)=”onChange()”></app-child>
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more