How to communicate between Components in Angular

In angular, there are several ways to communicate between components. The approach choice depends on the relationship between the components (if they are at the same level, if one is the father or child) and the specific application requirements. Below are some of the main ways to communicate between angular components:

1. Communication by Inputs and Outputs

Inputs ("@input"): A father component can pass data to a child component using the "@input" directive.

Example (Child Component)

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

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

Example (Father Component)
import { Component } from '@angular/core';

@Component ({
   Selector: 'app-father',
   Template: `<app-child [message]="fatherMessage"></ app-child>`
})
export class FatherComponent {
   fatherMessage = 'Hello, Child!';
}

Outputs ("@output"): A child component can issue events for the father component using the "@output" directive.

Example (Child Component)

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

@Component({

  selector: 'app-child',

  template: `<button (click)="sendMessage()">Send Message</button>`

})

export class ChildComponent {

  @Output() messageSent = new EventEmitter<string>();

  sendMessage() {

    this.messageSent.emit('Hello, father!');

  }

}

Example (Father Component)
import { Component } from '@angular/core';

@Component({
  selector: 'app-father',
  template: `<app-child (messageSent)="receiveMessage($event)"></app-child>`
})
export class FatherComponent {
  receiveMessage(message: string) {
    console.log(message); // 'Hello, father!'
  }
}

2. Shared services

A service can be used to share data and features between components that do not have a direct parent relationship.

Example (Service)

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

@Injectable({
  providedIn: 'root',
})
export class ShareDataService {
  sharedMessage = 'Message shared between components.';
}

Example (Component)

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

import { ShareDataService } from './share-data.service';

@Component({

  selector: 'app-component',

  template: `<p>{{ sharedMessage }}</p>`

})

export class ComponentComponent {

  sharedMessage: string;

  constructor(private shareService: ShareDataService) {

    this.sharedMessage = shareService.sharedMessage;

  }

}

3. Observables and Subjects

Observables and Subjects can be used to implement a publication and subscription standard for communication between components.

Example (Service)

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

@Injectable({
  providedIn: 'root',
})
export class ComunicationService {
  private messageSubject = new Subject<string>();
  message$ = this.messageSubject.asObservable();
  sendMessage(message: string) {
    this.messageSubject.next(message);
  }
}

Example (Components)

import { Component, OnDestroy } from '@angular/core';
import { ComunicationService } from './comunication.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component1',
  template: `<button (click)="sendMessage()">Send Message</button>`
})

export class Component1Component {
  constructor(private comunicationService: ComunicationService) {}

  sendMessage() {
    this.comunicationService.sendMessage('Component 1 Message');
  }
}

@Component({
  selector: 'app-component2',
  template: `<p>{{ receivedMessage }}</p>`
})
export class Component2Component implements OnDestroy {
  receivedMessage: string;
  private subscription: Subscription;

  constructor(private comunicationService: ComunicationService) {
    this.subscription = this.comunicationService.message$.subscribe(
      message => (this.receivedMessage = message)
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

These are some of the common approaches for communication between angular components. The choice of approach depends on the architecture of its application and the specific communication requirements between components.