How to establish communication between independent components in AngularJS ?
Last Updated :
28 Mar, 2023
AngularJS is a popular open-source web application framework that allows developers to create dynamic and interactive web applications. One of the key features of AngularJS is its ability to allow independent components to communicate with each other. In this article, we will see the process of establishing communication between independent components in AngularJS, along with understanding the different possible ways to communicate between the independent components with the help of examples.
The following methods can be utilized for establishing communication between components, which are described below:
Using the $rootScope: The $rootScope is a global scope that is accessible by all components in an AngularJS application. You can use the $rootScope to store data or events that need to be shared between components.
Approach 1: In this approach, we have two independent components, i.e., ControllerA and ControllerB. When the user clicks the "Send Data to Component B" button in ControllerA, we use $rootScope.$broadcast() to send the data to ControllerB. Then, in ControllerB, we use $rootScope.$on() to listen for the data and update the view.
Example: In this example, we have used the $rootScope.$broadcast() & $rootScope.$on() that will help to establish communication between independent components.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Establishing communication between
independent components in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1 style="color:green">
GeeksForGeeks
</h1>
<div ng-controller="ControllerA">
<h1>Component A</h1>
<input type="text"
ng-model="dataFromA" />
<button ng-click="sendData()">
Send Data to Component B
</button>
</div>
<div ng-controller="ControllerB">
<h1>Component B</h1>
<p>Data from Component A: {{dataFromA}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ControllerA',
function ($scope, $rootScope) {
$scope.sendData = function () {
$rootScope.$broadcast('dataFromA',
$scope.dataFromA);
}
});
app.controller('ControllerB',
function ($scope, $rootScope) {
$rootScope.$on('dataFromA',
function (event, data) {
$scope.dataFromA = data;
});
});
</script>
</body>
</html>
Output:
Using AngularJS Service: A Service is a singleton object in AngularJS that can be used to share data or functionality between components.
Approach 2: In this approach, we have two components (myCtrl1 and myCtrl2) that share data through a service (myService). The sharedData object in the service holds the data that needs to be shared between the components. The setSharedDataForComponent1 and setSharedDataForComponent2 methods in the service update the messageFromComponent1 and messageFromComponent2 properties respectively based on the input from the components.
Example: This example describes the communication between the independent components with the help of Services in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Establishing communication between
independent components in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1 style="color:green">
GeeksForGeeks
</h1>
<div ng-controller="myCtrl1">
<h2>Component 1</h2>
<input type="text"
ng-model="sharedData.message">
<p>
Message from Component 2:
{{sharedData.messageFromComponent2}}
</p>
</div>
<div ng-controller="myCtrl2">
<h2>Component 2</h2>
<input type="text"
ng-model="sharedData.message">
<p>
Message from Component 1:
{{sharedData.messageFromComponent1}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.factory('myService', function () {
var sharedData = { message: '',
messageFromComponent1: '',
messageFromComponent2: '' };
return {
getSharedData: function () {
return sharedData;
},
setSharedDataForComponent1: function (message) {
sharedData.messageFromComponent2 = message;
},
setSharedDataForComponent2: function (message) {
sharedData.messageFromComponent1 = message;
}
};
});
app.controller('myCtrl1', function ($scope, myService) {
$scope.sharedData = myService.getSharedData();
$scope.$watch('sharedData.message',
function (newValue, oldValue) {
myService.setSharedDataForComponent2(newValue);
});
});
app.controller('myCtrl2', function ($scope, myService) {
$scope.sharedData = myService.getSharedData();
$scope.$watch('sharedData.message',
function (newValue, oldValue) {
myService.setSharedDataForComponent1(newValue);
});
});
</script>
</body>
</html>
Output:
$emit and $on: The $emit method is used to emit an event from a child scope to its parent scope, and the $on method is used to listen to that event.
Approach 3: In this approach, we have two independent components, i.e., Component A and Component B. Component A has an input field and a button. When the button is clicked, the message entered in the input field is emitted using $emit. Component B has a paragraph element that displays the message received from Component A.
Example: This example illustrates the establishment of communication between independent components with the help of the $emit and $on methods.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>
Establishing communication between
independent components in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-controller="MainController">
<h1 style="color:green">
GeeksForGeeks
</h1>
<div>
<h2>Component A</h2>
<input type="text"
ng-model="message" />
<button ng-click="sendMessage()">
Send Message
</button>
</div>
<div>
<h2>Component B</h2>
<p>{{receivedMessage}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MainController',
['$scope', function ($scope) {
$scope.message = '';
$scope.sendMessage = function () {
$scope.$emit('message', $scope.message);
};
}]);
app.controller('ComponentBController',
['$scope', function ($scope) {
$scope.receivedMessage = '';
$scope.$on('message', function (event, message) {
$scope.receivedMessage = message;
});
}]);
app.directive('componentB', function () {
return {
restrict: 'E',
controller: 'ComponentBController',
template:
'<div><h2>Component B</h2><p>{{receivedMessage}}</p></div>'
};
});
</script>
<component-b></component-b>
</body>
</html>
Output:
Similar Reads
Establish communication between sibling components in Angular 11
In this article, we will see how we can pass data between sibling components on client machine. In Angular, we divide our web page into multiple components and the relation among these component forms a tree like structure. A component may have a parent and multiple children. That said, it can also
5 min read
Communication between components using $emit and props in Vue.js
Components in Vue.js need to share data with each other sometimes in order to give the desired output. Components in a webpage are in a hierarchical order like a tree. The most basic way of interacting and passing data between components is using $emit and props.$emit and props: In Vue.js, we use $e
3 min read
How to share data between controllers in AngularJS ?
The task is to share data variables between two or more controllers by using AngularJS. There are many procedures to achieve this. Here we will discuss the most popular ones. Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Her
3 min read
How To Share Data Between Child And Parent Directives And Components In Angular?
Sharing data between child and parent components in Angular is important for building dynamic and interactive applications. This can be done through various concepts, including input and output bindings or using a shared service. This article will explore how to use an Angular service to enable data
5 min read
How to communicate from parent component to the child component in Angular 9 ?
Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component. Approach: Let's create two components: parent child In the parent component, declare the property that you want to receive in the child comp
2 min read
Component Communication in Angular
Angular, as a robust front-end framework, allows you to build complex and interactive web applications by creating reusable components. One of the key aspects of building such applications is effective communication between these components. There are a lot of instances where we need to transfer dat
12 min read
How to enable routing and navigation between component pages in Angular 8 ?
The task is to enable routing between angular components by making their routes when a user clicks the link, it will be navigated to page link corresponding to the required component.Let us know what is routing in AngularAngular 8 routing:The Angular 8 Router helps to navigate between pages that are
2 min read
How to pass data from Parent to Child component in Angular ?
We can use the @Input directive for passing the data from the Parent to Child component in AngularUsing Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is th
2 min read
How To Consuming JSON APIs in AngularJS Application?
AngularJS is a powerful JavaScript framework that makes it easy to build dynamic web applications. One of the common tasks in modern web applications is consuming data from RESTful APIs, often in the form of JSON. This article will walk you through the steps to consume JSON APIs in an AngularJS appl
2 min read
How to create a new component in Angular?
A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc. In this a
3 min read