Transfer data to one component to another Angular 2

Question

I am working with Angular 2 and I have 2 different components in the application.

I am trying to transfer data from one component to another, but I am not able to transfer data with input and output parameters.

I am using following code to transfer data.

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

transferdata()
{
    this.previousurl.emit("Hello");
}

Above code i am using to emit the data.

@Input() previousurl: string;

And above code is using to receive data.

Please correct if I am doing wrong.

Thanks.

How are you using these input and output, can you add sample code? — Anshuman Jaiswal, Mar 28 '18 at 07:46
@AnshumanJaiswal I have implemented the code as I described above. In input parameters I am no fetching the value that I have emitted from the output parameter. Can you please suggest how I will receive the data. — Prince Chopra, Mar 28 '18 at 07:50
As far I know if your element Compnent is nested you can pass it directly by declaring Input variable but if the component is sibling then you have to use output too. — Shubham Agarwal Bhewanewala, Mar 28 '18 at 07:51
I have 2 different components, not like parent and child. Is this possible to transfer data? @ShubhamAgarwalBhewanewala — Prince Chopra, Mar 28 '18 at 07:53
There are different scenarios for communication between components dependent on the relation of both components, parent - child or vice versa, or siblings. Working with input and output works with parent-child relations. Siblings, it is better to use a service. — Sameh Awad, Mar 28 '18 at 07:53
@SamehAwad CAN YOU explain about sibling communication using service? — Shubham Agarwal Bhewanewala, Mar 28 '18 at 07:54
https://stackoverflow.com/questions/41958836/angular2-interaction-between-components-using-a-service can probably help. — callback, Mar 28 '18 at 07:55
@PrinceChopra CAn you define relation among your components? — Shubham Agarwal Bhewanewala, Mar 28 '18 at 07:55
@PrinceChopra the documentation isn't just there to look pretty. https://angular.io/guide/component-interaction — , Mar 28 '18 at 07:56
@ShubhamAgarwalBhewanewala As I already told that I have 2 different components and there is no relation among the components. — Prince Chopra, Mar 28 '18 at 07:56

Sameh Awad · Answer 1 · 2018-03-28T13:38:22.067

As mentioned in the comments, you need to use a service something like this:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PreviousUrlService {

  previousUrl: Observable<string>;

  private previousUrlSubject: Subject<string>=new Subject();
  constructor() {
    this.previousUrl = this.previousUrlSubject.asObservable();
  }

  updatePreviousUrl(prevUrl: string) {
    this.previousUrlSubject.next(prevUrl);
  }

}

And the components need to be injected with the service.

export class ComponentAComponent implements OnInit {

  previousUrl:string;
  constructor(private previousUrlService: PreviousUrlService) {

  }

  ngOnInit() {
    this.previousUrlService.previousUrl.subscribe((data) => {
      this.previousUrl=data;
      console.log('>> previous url', this.previousUrl);
    });
  }

}

And then component B can change the value and it fires in component A subscription function

export class CompBComponent implements OnInit {

  constructor(private previousUrlService: PreviousUrlService) {
  }

  ngOnInit() {

  }

  onUpdateUrl(prevUrl: string){
    this.previousUrlService.updatePreviousUrl('http://google.com');
  }

}

This is the general idea experiment with different types of subjects to suit ur needs.

Yes, I am also transferring data with service, I was wondering that if it is possible with input and output parameters. — Prince Chopra, Mar 28 '18 at 11:55
If the two components are not parent and child then using inputs and outputs is not a good idea. A workaround if they are siblings (direct descendents of the same parent), is to use inputs and outputs on both components. Subscribe the parent for both event emitters(outputs) and when the events are fired, it can propagate the change to the inputs of the children. But I really don't recommend this as it is very tightly coupled. — Sameh Awad, Mar 28 '18 at 12:09

Transfer data to one component to another Angular 2

1 Answers1