Pass Data Between Nested Components

In this exercise we are going to create two nested components, and we are going to learn how to pass data between them.

1) We will create an empty angular project, following this tutorial

Create a new angular project

2) then we will create two components using the angular cli

ng generate component mycomponent1 -m
ng generate component mycomponent2 -m

3) leaving the following structure

4) we are going to nest the components as follows,

• App
  • mycomponent1
    • mycomponent2

5) For this in the App component we will insert the mycomponent1

<div style="background-color: greenyellow;">
    <h3>{{ title }}</h3>
    <router-outlet></router-outlet>
    <div style="background-color: lightblue; margin: 15px;">
            <app-mycomponent1></app-mycomponent1>
        <hr/>
    </div>
    <hr/>
</div>

6) in mycomponent1 we insert the mycomponent2

<p>My Component 1</p>
<h1>{{messageFromComp2}}</h1>

<div style="background-color: lightcoral;margin: 15px;">
    <app-mycomponent2></app-mycomponent2>
</div>

7) in mycomponent2 it would look like this

<div style="padding: 5px;">
    <p>My Component 2</p>
    <button
        (click)="onButtonClick()">
        Button 1
    </button>
</div>

8) when executing the application it would look like this, a background color was added to differentiate the components within others

9) Now we are going to send data from component1 to component2, for this we will use @Input(), in the typescript file of component2 we will insert the following variable which we will use to capture the value that comes from component1, in order to capture that value we will use the @Input() directive

    @Input() valueFromComp1 : number;

10) In the HTML file of component2, we will insert the following, to display the value received from component1

<h1>value from MyComponent1 is {{valueFromComp1}}</h1>

11)in the HTML file of component1, we will update the call to component2 , to send the value to component2

    <app-mycomponent2 [valueFromComp1]="1000" ></app-mycomponent2>

12) We run the project and see the value received in component 2

13) now from Component2 we are going to send a value to component1, for this we will use the @Output directive, in the typescript file of component2 we will insert the following code

 @Output() myEventComp2 : EventEmitter<string>= new EventEmitter<string>();

onButtonClick() : void{
        console.log("button clicked");
        this.myEventComp2.emit("Message from MyComponent2");
    }

the idea is to create an event that emits the value you want to send to component1, for them we will add the onButtonClick event to the button of component2

    <button
        (click)="onButtonClick()">
        Send Data to Component1
    </button>

14) in component1 we must call and capture the event, take the value and display it in the HTML, for this we will update the call to component2 , to call the eventemitter and link it with an event in component1

in mycomponent1.html

    <app-mycomponent2
    [valueFromComp1]="1000"
    (myEventComp2)='onEventFromComp2($event)'>
    ></app-mycomponent2>

in mycomponent1.ts

  messageFromComp2 : string = "";

  onEventFromComp2(message : string) : void{
    console.log("event received from comp2");
    this.messageFromComp2 = message;
  }

note that we use the event onEventFromComp2 to bind the event emitted from component2 and store the received value in the variable messageFromComp2 , and this is the variable that we will display on the screen

15) we update the html file of component1 to show the value that comes from component2

<h1>{{messageFromComp2}}</h1>

16) when executing the project it would look like this

pressing the button would show the following