The Ultimate Guide to the Input and Output Decorator in Angular

Understanding the power of the Angular input and output decorator can be a great way to take your project development to the next level. This guide from CMARIX will show you all that you need to know about using the input and output decorators so that you can maximize their potential in your projects.

You will learn how to use these two powerful Angular tools together and understand how they work. 

How Does Angular @Input Work?

In Angular, the @Input() decorator is used to defining a component property that can receive data from its parent component. The basic idea is that a parent component can pass data to its child components by binding to their input properties using property binding.

Here's a step-by-step explanation of how @Input()works in Angular:

1. Define the Input Property

In the child component, you define an input property using the @Input() decorator. This decorator takes an optional parameter that specifies the name of the input property.

For example, the following code defines an input property called title that will receive a string value from the parent component:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() title: string;
}

2. Bind to the Input Property

In the parent component, you bind a value to the input property using property binding. This involves adding a binding expression to the child component tag in the parent template.

For example, the following code binds the string value 'My Title' to the title input property of the ChildComponent:

<app-child [title]="'My Title'"></app-child>

Note that the binding expression is enclosed in square brackets, which is the syntax for property binding in Angular.

3. Use the Input Property

In the child component, you can use the input property in the template or the component code just like any other property.

For example, the following code uses the title input property in the child component template:

<h1>{{ title }}</h1>

When the parent component binds the string value 'My Title' to the title input property of the ChildComponent, the title property will be set to this value and can be used in the child component template.

Overall, the @Input() decorator in Angular provides a simple and powerful mechanism for passing data from a parent component to its child components using property binding.

How Does Angular @Output Work?

In Angular, the @Output() decorator is used to creating custom events that can be emitted by a child component and handled by its parent component. The basic idea is that a child component can emit an event by calling the emit() method on an instance of the EventEmitter class, which is marked as an output property using the @Output() decorator. The parent component can then listen for this event using event binding and handle it using a method that is defined in the parent component.

Here's a step-by-step explanation of how @Output() works in Angular:

1. Define the Output Property

In the child component, you define an output property using the @Output() decorator. This decorator takes an optional parameter that specifies the name of the output event. The output property must be an instance of the EventEmitter class, which is a generic class that takes a type parameter that specifies the type of data that will be emitted by the event.

For example, the following code defines an output property called ratingClicked that will emit an event when the user clicks on a star rating:

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

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.css']
})
export class StarRatingComponent {
  @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();

  onClick() {
    this.ratingClicked.emit('5 stars');
  }
}

2. Emit the Event

In the child component, you emit the output event by calling the emit() method on the output property. This method takes an optional parameter that specifies the data that will be passed to the parent component.

In the example above, the onClick() method emits the ratingClicked event with a string parameter that contains the value '5 stars'.

3. Listen for the Event

In the parent component, you listen for the output event using event binding. This involves adding an event-binding expression to the child component tag in the parent template.

For example, the following code listens for the ratingClicked event emitted by the StarRatingComponent:

<app-star-rating (ratingClicked)="onRatingClicked($event)"></app-star-rating>

4. Handle the Event

In the parent component, you handle the output event by defining a method that takes the emitted data as a parameter. This method is called when the event is emitted by the child component.

In the example above, the onRatingClicked() method is called with the string parameter '5 stars' when the user clicks on the star rating in the StarRatingComponent.

Overall, the @Output() decorator in Angular provides a simple and flexible mechanism for creating custom events that can be used to communicate between a child component and its parent component.

Conclusion

Together, @Input() and @Output() provide a powerful mechanism for creating a bi-directional communication channel between a parent component and its child components in Angular. This allows components to be easily composed and reused and enables the development of complex UIs that can respond dynamically to user interactions and data changes.