Angular Input and Output: Communication Between Components

In Angular, input and output are two important concepts that allow you to communicate between components. Inputs allow you to pass data from a parent component to a child component, while outputs allow you to emit data from a child component to a parent component. In this blog, we will take a closer look at inputs and outputs in Angular and provide some examples to help you understand how they work.

Input in Angular

Input is a decorator in Angular that allows you to pass data from a parent component to a child component. Inputs are used when you want to pass data from a parent component to a child component in order to change the behavior of the child component.

Here is an example of how to use input in Angular:

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

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

In this example, we have created a child component that takes in a title input. The @Input decorator is used to define the input property, which can be passed from the parent component to the child component.

Here is an example of how to use the child component in a parent component:

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component [title]="myTitle"></child-component>
  `
})
export class ParentComponent {
  myTitle = 'Hello World';
}

In this example, we have created a parent component that passes the myTitle variable as an input to the child component using square brackets. The child component will receive the input and display the title.

Output in Angular

Output is a decorator in Angular that allows you to emit events from a child component to a parent component. Outputs are used when you want to send data or events from a child component to a parent component.

Here is an example of how to use output in Angular:

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

@Component({
  selector: 'child-component',
  template: `
    <button (click)="onButtonClick()">Click me</button>
  `
})
export class ChildComponent {
  @Output() buttonClick = new EventEmitter<void>();

  onButtonClick() {
    this.buttonClick.emit();
  }
}

In this example, we have created a child component that emits a buttonClick event when the button is clicked. The @Output decorator is used to define the buttonClick event and the EventEmitter is used to emit the event.

Here is an example of how to use the child component in a parent component:

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component (buttonClick)="onButtonClick()"></child-component>
  `
})
export class ParentComponent {
  onButtonClick() {
    console.log('Button clicked!');
  }
}

In this example, we have created a parent component that listens for the buttonClick event emitted by the child component. When the button is clicked in the child component, the onButtonClick method in the parent component is called, which logs ‘Button clicked!’ to the console.