Methods to Share Data Between Angular Components

Sharing Data Between Angular Components: An Overview

Sharing data between Angular Components is a real challenge for Angular developers. Angular provides several methods to accomplish this task effectively and efficiently. In this Angular tutorial, we'll dive into the four data-sharing methods between Angular Components. Let's get started with these easy ways to connect your Angular components!

What is Data Sharing between Angular Components?

Data sharing between components in Angular refers to exchanging data between them. This is important when developing interactive and dynamic applications, as components are usually required to communicate and exchange data to perform their functions.

Methods to Share Data Between Angular Components

There are four Methods to Share Data between Angular Components:

1. Parent-to-Child: Sharing Data via @Input
2. Child-to-Parent: Sharing Data via @Output() and EventEmitter
3. Unrelated Components: Sharing Data via a Service
4. Child-to-Parent: Sharing Data via ViewChild

1. Parent-to-Child: Sharing Data via @Input

Input properties allow to passing of data from a parent component to its child component. By defining a property in the child component with the @Input() decorator, you can receive the data from the parent component.

Example of Parent-to-Child: Sharing Data via @Input

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "Hello message from parent!"
  constructor() { }
}
        

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

2. Child-to-Parent: Sharing Data via @Output() and EventEmitter

If you want to pass data from the child component to the parent component use @Output() and EventEmitter.

@Output is a component decorator that becomes the output for the parent component and EventEmitter is something that can propagate the event from the child component to the parent component. In the parent, we will create a function to receive the message and set it equal to the message variable. In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter.

Example of Child-to-Parent: Sharing Data via @Output() and EventEmitter

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

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

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      Send Message
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola Mundo!"

  @Output() messageEvent = new EventEmitter();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

We create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function. The parent can now subscribe to this messageEvent that’s outputted by the child component, and then run the receive message function whenever this event occurs.

4. Child-to-Parent: Sharing Data via ViewChild

ViewChild allows one component to be injected into another, giving the parent access to its attributes and functions.

There's an issue that the child won’t be available until after the view has been initialized. Therefore, we need to implement the AfterViewInit lifecycle hook to receive the data from the child.

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;

  constructor() { }

  message:string;

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message = 'Hola Mundo!';

  constructor() { }

}

3. Unrelated Components: Sharing Data via a Service

A shared service acts as a central point for data manipulation and communication between components. Components can share data by injecting and accessing the service.

In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable to handle this data stream as an observable that will be used by the components. After that, we create a function that calls next on the BehaviorSubject to change its value.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable.

Example of Unrelated Components: Sharing Data via a Service

data.service.ts

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

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

}

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit, OnDestroy {

  message:string;
  subscription: Subscription;

  constructor(private data: DataService) { }

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

}

sibling.component.ts

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

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    New Message
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit, OnDestroy {

  message:string;
  subscription: Subscription;

  constructor(private data: DataService) { }

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

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

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

The SiblingComponent is responsible for storing the shared data and providing methods for setting and retrieving it. Both components can inject the service and make use of its methods to access the data. This creates a two-way data flow between all components that make use of the service.

Read More:

• Angular Developer Skills
• Angular Developer Salary In India
• Understanding Angular Components

Summary

Sharing data among Angular components is essential for developing dynamic apps. We explored four approaches: Parent-to-Child via @Input, Child-to-Parent via @Output() and EventEmitter, Unrelated Components via a shared service, and ViewChild. Each method provides distinct methods to create excellent interaction, allowing your Angular components to operate together perfectly.

Take our Angular skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE