Angular Component Communication & Sharing Data

Angular is one of the most popular frameworks for building feature-rich and scalable web applications. One of the essential aspects of Angular development is component communication, where components interact with each other to share data, methods, and events. In this article, we will explore the different ways of Angular component communication and data sharing.

1. Parent-Child Component Communication

In Angular, components can pass data to their child components using Input and Output decorators. Input properties allow a parent component to bind data into a child component and Output properties allow a child component to emit an event to notify its parent component.

Let’s consider an example of a parent component that wants to pass a message to a child component.

“`
// Parent Component

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-parent’,
template: `

Parent Component


`,
styleUrls: [‘./parent.component.css’]
})
export class ParentComponent {
parentMessage = “Hello from parent component!”;
}
“`

“`
// Child Component

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

@Component({
selector: ‘app-child’,
template: `

Child Component

{{ message }}

`,
styleUrls: [‘./child.component.css’]
})
export class ChildComponent {
@Input() message: string;
}
“`

In this example, the parent component passes a message to the child component using the Input decorator. The child component receives the message as a property using the @Input decorator. Now, the child component can use and display the received message.

2. Child-Parent Component Communication

A child component can communicate with its parent component using events. In Angular, the EventEmitter class allows a child component to emit an event that a parent component can listen to.

To understand this, consider the following example.

“`
// Child Component

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

@Component({
selector: ‘app-child’,
template: `

`
})
export class ChildComponent {
message = “Hello from child component!”;
@Output() messageEvent = new EventEmitter();

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

“`
// Parent Component

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-parent’,
template: `

Parent Component

{{ message }}

`
})
export class ParentComponent {
message: string;

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

In this example, the child component emits an event when the button is clicked. The event contains the message that the parent component listens to using the Output decorator. The parent component receives the message in the receiveMessage method and sets the message property, which it can use or display.

3. Service Communication

In Angular, a service is an instance of a class that can be injected into different components. A service can be used to share data or functionality between components. Components can inject the same instance of a service to share data.

Consider the following example.

“`
// Data Service

import { Injectable } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’,
})
export class DataService {
cars = [“BMW”, “Mercedes”, “Audi”, “Toyota”];
}
“`

“`
// Parent Component

import { Component } from ‘@angular/core’;
import { DataService } from ‘../data.service’;

@Component({
selector: ‘app-parent’,
template: `

Parent Component


`
})
export class ParentComponent {
constructor(private dataService: DataService) { }
}
“`

“`
// Child Component

import { Component } from ‘@angular/core’;
import { DataService } from ‘../data.service’;

@Component({
selector: ‘app-child’,
template: `

Child Component

  • {{ car }}

`
})
export class ChildComponent {
cars = [];

constructor(private dataService: DataService) { }

ngOnInit() {
this.cars = this.dataService.cars;
}
}
“`

In this example, the DataService is injected into both the parent and child components. The parent component does not use the service, but it injects it so that the child component can use it. The child component retrieves data from the DataService using the ngOnInit method, which is called after the component is initialized.

FAQs

1. What is component communication in Angular?

Component communication in Angular refers to the interaction between Angular components. Components can communicate with each other to share data, methods, and events.

2. What are the different ways of Angular component communication?

The different ways of Angular component communication are: parent-child component communication, child-parent component communication, and service communication.

3. How can a parent component pass data to a child component in Angular?

A parent component can pass data to a child component using the Input decorator. The parent component binds data to a property of the child component using square brackets, and the child component receives the data as an @Input property.

4. How can a child component emit an event to its parent component in Angular?

A child component can emit an event to its parent component using the Output decorator and the EventEmitter class. The child component emits an event with the help of a method and passes data to the event. The parent component listens to the event using parentheses and a method.

5. What is an Angular service and how can it be used for component communication?

An Angular service is an instance of a class that can be injected into different components. A service can be used to share data or functionality between components. Components can inject the same instance of a service to share data.

Similar Posts