How to Pass Data Between Components in Angular

Are you here to find how to Pass Data Between Components in Angular, then you are at the right place.

In this article, we will discuss different ways of passing data between components.

Angular is ideal for creating business apps, e-commerce apps, mobile apps with engaging animations, and progressive web apps that function offline, and work and behave like a mobile app. The gripping and attractive features of Angular, which include- templating, two-way binding, modularization, handling of RESTful APIs, dependency injection, and AJAX handling, aid in the development of interactive and dynamic single-page applications (SPAs).

There is a plethora of components with great functionality and capabilities in an Angular application. For example, we can get across a circumstance where we need to transmit data from one component to another, when designing an application, by utilising some of the built-in functionalities offered by Angular. We can do that using the idea of data sharing.

The methods for exchanging or passing data between the components in angular are listed below, and understanding how they can be implemented or put into effect properly, is crucial.

1. Parent-to-child component
2. Child-to-parent component
3. Sharing data between sibling components
4. Sharing data using ViewChild property
5. Sharing data between not related components

Data Sharing Through Input- Parent to Child Component:

When @Input() is defined in the child component, the master or parent component supplies the value. Let’s say we are working on a sports website, which displays scores of live matches. Now as a display of the score remains fairly constant we will create a common component which will take the match score and display it in the format we specify.

Let’s take a look at the code for the match score component.

match-score.component.ts

 @Input()
  matchScore: any;

We have defined matchScore as an input parameter, which we will pass from the parent component.

match-score.component.html

<div class="col-xs-3 col-md-3 liveScoreText">

    <span> {{matchScore?.time?.starting_at?.date}}
    </span>
</div>
<div class="col-xs-3 col-md-3 liveScoreText">
    <!-- <img [src]="liveScore.localTeamLogo" class="liveScoreLogo" /> -->
    <div class="row"  *ngIf="matchScore?.localTeam?.data?.logo_path">
        <img [src]="matchScore?.localTeam?.data?.logo_path" class="scoreicon" />
    </div>
    <div class="row">
        <span> {{matchScore?.localTeam?.data?.name}}</span>
    </div>
</div>
<div class="col-xs-3 1col-md-3" *ngIf="matchScore.time.status=='FT'" (click)="goToMatchDetails(matchScore);">
    {{matchScore?.scores?.localteam_score}}-{{matchScore?.scores?.visitorteam_score}}
</div>
<div class="col-xs-3 col-md-3 liveScoreText">
    <!--  <img [src]="liveScore.visitorTeamLogo" class="liveScoreLogo" /> -->
    <div class="row" *ngIf="matchScore?.visitorTeam?.data?.logo_path">
        <img [src]="matchScore?.visitorTeam?.data?.logo_path" class="scoreicon" />
    </div>
    <div class="row">
        <span> {{matchScore?.visitorTeam?.data?.name}}</span>
    </div>
</div>

The input decorators are supposed to demonstrate that a child component is looking for inputs (expecting some value) from its parent component.

Now let’s take a look at the parent component which will pass these value to the child component.

fixture.component.html

<-- Iterate through liver score and pass to child component-->
<app-match-score [matchScore]="latestFixtures" [scoreType]="scoreType"></app-match-score>

Child to parent component

Output decorator must be defined to share data from the child component to the parent. As a result, the output decorator in the child component should be written as

@Output() eventName = new EventEmitter<String>(); 

Sharing data from the child component requires to bubble (first handled by the innermost element and then propagated out) the event with value, to the parent components. In this case, the trigger point through which the event may be bubbled is a button click. The button click initiates a ‘sendToParent’ call.

childtoParent needs to be associated with the child tag in the parent component.

Let’s say on our match-score component we have a button called “View Details”. With the click of this button, we want to notify the Parent component that the user is interested in viewing details of the score.

So in our match-score component, we will add an output variable as mentioned below

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

viewDetailScore(value: string) {
    this.viewDetailScoreEvent.emit(value);
  }

<button type="button" (click)="viewDetailScore(matchScore.fixtureId)">View Detail Score</button>

Now let’s take a look at how we will write code in our parent component to capture this event emitted by the child component.

  viewScoreDetails(fixtureId: string) {
    //Add your code to fetch details of scorebaord based on fixture passed from Child component.
  }

<app-match-score [matchScore]="latestFixtures" [scoreType]="scoreType" (viewDetailScoreEvent)="viewScoreDetails($event)"></app-match-score>

Components for Sharing Data Between Siblings: 

Sibling components can communicate with one another through parent components.  Data sharing between the child and parent should first be done using output decorators and EventEmitters. Once data is received by the parent component, it can be further shared with the other child component, by using an input decorator.

Besides the aforementioned ways, we can also use the below-mentioned methods for data sharing.

• ViewChild enables the injection of child components into parent components.
• Data service to share data between components that are not related. This summarises the different ways one can pass data between components in Angular.

Don’t forget to check out our article on “Why Programmers Still Love Using Angular in 2022“

We hope this article helped you to find out “How to Pass Data Between Components in Angular”.