Input and Output Properties in Angular

Input and Output properties are essential for parent-child component interaction in Angular. Input properties allow data to flow from a parent component to a child component, while Output properties enable a child component to send events to a parent component. This tutorial covers how to use Input and Output properties effectively.

Input Properties

The @Input decorator is used to define an input property in the child component, allowing data to be passed from the parent component.

Defining an Input Property

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

@Component({
  selector: 'app-child',
  template: '<p>Message from parent: {{ message }}</p>'
})
export class ChildComponent {
  @Input() message: string;
}

Binding to an Input Property

The parent component binds to the input property using property binding syntax:

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

@Component({
  selector: 'app-parent',
  template: '<app-child [message]="parentMessage"></app-child>'
})
export class ParentComponent {
  parentMessage = 'Hello from Parent';
}

Output Properties

The @Output decorator and an EventEmitter are used to define an output property in the child component, allowing the child component to emit events to the parent component.

Defining an Output Property

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

@Component({
  selector: 'app-child',
  template: '<button (click)="sendMessage()">Send Message</button>'
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

Binding to an Output Property

The parent component binds to the output property using event binding syntax:

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>Message from child: {{ message }}</p>
  `
})
export class ParentComponent {
  message: string;

  receiveMessage($event) {
    this.message = $event;
  }
}

Combining Input and Output Properties

Input and Output properties can be combined to enable two-way communication between parent and child components.

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

@Component({
  selector: 'app-child',
  template: `
    <p>Message from parent: {{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
    <p>Message from child: {{ message }}</p>
  `
})
export class ParentComponent {
  parentMessage = 'Hello from Parent';
  message: string;

  receiveMessage($event) {
    this.message = $event;
  }
}

Conclusion

Input and Output properties in Angular are essential for facilitating communication between parent and child components. By understanding and using these properties effectively, you can create dynamic and interactive Angular applications. Happy coding!