OUR SERVICES

Blockchain Development

Machine Learning

UI UX Design

Web App Development

Mobile App Development

Product Development

Offshore Partnering

Angular Components Interaction Methods – A Quick Study

author

Ravi Chandhar P B

Author

April 17, 2020

Angular Components and Interactive Methods

Introduction

In all the calculations done manually or programmatically, the data collected gets shared and evaluated in a particular process to attain certain end results. Across sectors sharing of data plays a vital role in computing end solutions. Now, let’s get into a comprehensive view of how the data get shared among multiple components in an Angular application. Even before getting started with the Angular Project, is important to a clear understanding of the key concept of Data Sharing. In case of having multiple components in your angular application and to communicate between the components, then Angular provides you some features and angular components interaction methods. Hence, in this section lets get a study on the different methods used for sharing data between the angular components.

Angular Components Interaction Methods

Data sharing between the angular components is possible with the following ways,

  • Sharing Data from Parent to Child:  @Input
  • Sharing Data from Child to Parent:  @ViewChild
  • Sharing Data from Child to Parent:  @Output & EventEmitter 
  • Sharing Data Between Various Components:  Service

Sharing Data from Parent to Child:  @Input

Firstly, Angular provides a decorator called @Input decorator which can be used to pass data from Parent to Child. This is one of the most common methods of sharing data from Parent to Child in Angular application. Now, let’s see the working of the @Input decorator in the following snippets,

# calibraint-parent.component.ts

parent to child component

# calibraint-child.component.ts

parent to child

Sharing Data from Child to Parent:  @ViewChild

Angular provides this  @ViewChild() decorator which can be used to inject one component to another. Now, this is made possible by giving the parent access to its attributes and functions. Also, to be noted that the Child component gets available only after the view gets initialized. So, we need to implement the AfterViewInit lifecycle hook to get the data from the child.  Now, let’s see the working of the @ViewChild decorator in the following snippets,

# calibraint-parent.component.ts

parent components

# calibraint-child.component.ts

child components

Sharing Data from Child to Parent:  @Output & EventEmitter 

The @Output decorator allows marking a class field as an output property and supplies configuration metadata.

In this method, the child component will emit the data, which will be received by the parent component. Firstly, if we need to send data from the child to the parent, then it is required to emit the data from the child. To make it function so, we need to create a function in the parent to receive the message and set it equal to the variable of the message. The @Output decorator now allows declaring a message event variable in the child. So, now the parent can subscribe to this message event that the child component emits and then executes the receive message function whenever this event occurs.

This ideal condition and this approach are helpful when you want to share some data on some events like button clicks, users and other form-related events.

# calibraint-parent.component.ts

parent component

# calibraint-child.component.ts

child components

Sharing Data Between Various Components: 

Service is a class that holds the data or functions based on the application’s need and also stores the logic in the file, this allows us to reuse the code with the different components when it requires. In the service, we create a private BehaviorSubject that holds the current value of the message. Then, we have to define a current message variable to handle this data stream as an observable that will be used by the components. Lastly, we have to create a function that calls next on the BehaviorSubject to change its value.

# calibraint-data.service.ts

data services

Components of the parent, child, and sibling will receive the same values. We inject the CalibraintDataService into the constructor, then subscribe to the observable current message and set its value equal to the variable message.

Now if we create a function in any of these components which changes the message value. When the new data is executed this function will automatically transmit it to all other components.

# calibraint-parent.component.ts

parent components

# calibraint-sibling.component.ts

sibling components

Conclusion

In this post, it is depicted on how to share data between parent and child components using @Input(), @Output and EventEmitter and also on the methods to share data between different components. Data sharing is a very important concept, and everybody requires sharing data between the application components. Hope you had an insightful overview of the data sharing concept in Angular.

Reference:- https://angular.io/docs

Credits:- https://carbon.now.sh/

Related Articles

field image

Are you one among those who get blown away by newer angular versions and features since their inception? Well, I’ve been equally enthralled and have been following all of the releases since AngularJS was first released in 2010. Examining the evolution of Angular versions will help us understand how this framework has progressed over time, […]

author-image

Sakthi S

Author

26 Apr 2022

field image

  Every developer who has spent substantial time in the coding field, discovering the capabilities of programming languages, understands what a treasure Angular is! The numerous features of the Angular programming language attest to its well-deserved popularity. Angular has been quite popular since its introduction and has seen remarkable growth.

author-image

Sakthi S

Author

20 Jan 2022

field image

Technology has reduced the effort and time and has increased the efficiency of the production requirements in every field especially in web application development. Many businesses have discovered that building online and mobile apps with the Angular framework will help them deliver rich user experiences, ease of access, speed, and productivity. Here are the top […]

author-image

Sakthi S

Author

19 Jan 2022

field image

Angular 11 Updates! The do’s of ESLint to all the robust building and fast speed reporting. Get on track with all the new features and updates.

author-image

Anni Joice S

Author

25 Jan 2021

field image

Tech stacks are the bread and butter of a website that is responsible for both the functioning and development of an application across all platforms. The leading applications such as Uber, Swiggy, Facebook, Instagram are the best examples of applications that use the most desirable combination of popular tech stacks in their particular domain

author-image

Calibraint

Author

04 Dec 2020

field image

After the mediation of relational databases picking complexities and challenges has also raised the bar, the article tries to picture the choices and comparisons made out of MongoDB and MySQL.

author-image

Calibraint

Author

16 Jul 2020