Passing data form one component to another (Sibling component) in angular 8

This blog shows you how to pass data from one component to another using EventEmitter

First create a service that could be injected in both the component (ANGULAR CLI COMMAND ‘ng g s customer-forms’) this will create a service with the name customerForms.service.ts

Now create a method in service that will be called from component on click, Let’s call is PassData

PassData(DataSource)

    {

        console.log(DataSource);

    }

Create a EventEmitter object which will emit the data

$dataSource = new EventEmitter();

Use this $dataSource variable in PassData method

PassData(DataSource)

    {

        console.log(DataSource);

        this.$dataSource.emit(DataSource);

    }

Now let’s create a method on component which will call PassData of service

Edit(CustomerRequest)

  {

    console.log(CustomerRequest);

    this.customerRequestService.PassData(CustomerRequest);

  }

Call this method on click of any html component.

<section class="col-md-3 border cursor-action" (click)="Edit(customerRequest)" 

    *ngFor="let customerRequest of customerRequests">

After running This you will see logs in console

Now we need to handle this emit in other component

For this we need subscribe to the variable $dataSource of service in receiving component in ngInit()

this.customerRequestService.$dataSource

      .subscribe((data) => {console.log('DataSource received', data);

      this.Edit(data);

    });

And finally

  Edit(CustomerRequest)

  {

    console.log(CustomerRequest);

    this.form.setValue({

      CompanyName:CustomerRequest.CompanyName,

      Name: CustomerRequest.Name,

      SoftwareId:CustomerRequest.SoftwareId,

      RelationshipDuration:CustomerRequest.RelationshipDuration,

      RequestMessage:CustomerRequest.RequestMessage

    });

  }

After doing all this you can see that the code is working in the console of browser

Thanks

Do not forget to subcribe to my blog i.e. codeinout.blogspot.com