Component Communication in Angular

Component communication in Angular is essential for building complex applications where components need to interact with each other. This tutorial covers the basics of component communication and how to use it effectively in your Angular applications.

What is Component Communication?

Component communication refers to the various ways in which components can pass data and events to each other. In Angular, there are several strategies for achieving component communication.

Parent to Child Communication

Parent to child communication can be achieved using input properties with the @Input decorator:

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

@Component({
  selector: 'app-child',
  template: '<div>Hello, {{ name }}!</div>'
})
export class ChildComponent {
  @Input() name: string;
}

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

@Component({
  selector: 'app-parent',
  template: '<app-child [name]="parentName"></app-child>'
})
export class ParentComponent {
  parentName = 'Angular';
}

Child to Parent Communication

Child to parent communication can be achieved using output properties with the @Output decorator and EventEmitter:

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');
  }
}

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

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

  receiveMessage(message: string) {
    this.message = message;
  }
}

Sibling Communication

Sibling communication can be achieved using a shared service to pass data between components:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new Subject<string>();
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

// Component 1
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component-one',
  template: '<button (click)="newMessage()">New Message</button>'
})
export class ComponentOne {
  constructor(private data: DataService) {}

  newMessage() {
    this.data.changeMessage('Hello from Component One');
  }
}

// Component 2
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component-two',
  template: '<p>{{ message }}</p>'
})
export class ComponentTwo implements OnInit {
  message: string;

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
  }
}

Using ViewChild for Parent to Child Communication

You can use @ViewChild to access child component methods and properties:

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

@Component({
  selector: 'app-child',
  template: '<div>Child Component</div>'
})
export class ChildComponent {
  greet() {
    console.log('Hello from Child Component');
  }
}

// Parent component
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>
<button (click)="childGreet()">Greet</button>'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit() {
    this.child.greet();
  }

  childGreet() {
    this.child.greet();
  }
}

Key Points

Conclusion

Understanding and implementing component communication in Angular is crucial for creating interactive and dynamic applications. By using the appropriate communication strategies, you can ensure smooth data flow between components, leading to a more maintainable and scalable application. Happy coding!