5

In Angular2 , assume I have component1(use it as left panel navigator) and component2 .these two components are not related to each other (sibling, parent and child, ...). how can I call a function in component1 from component2? I cant use event binding here.

Sara N
  • 1,079
  • 5
  • 17
  • 45
  • You'd probably use a [service](https://angular.io/docs/ts/latest/tutorial/toh-pt4.html) to manage that connection. – ryannjohnson Feb 23 '17 at 00:44
  • Use the flux pattern - the service is the dispatcher of events, components are the subscribers. Components don't really know about each other. This might be useful: http://stackoverflow.com/questions/42219858/how-can-i-maintain-the-state-of-dialog-box-with-progress-all-over-my-angular-2-a/42221273#42221273 – Michael Kang Feb 23 '17 at 00:47
  • @ryannjohnson in component1, I have interpolation {{total}} which needs to be updated and shown in left panel immediately . if I just call service , how can I update this variable? – Sara N Feb 23 '17 at 00:54
  • @pixelbits I will check if I can use it or not? – Sara N Feb 23 '17 at 00:54
  • @SarahN Checkout @seidme's answer below. Once you've injected the service into your component, you can just refer to its properties directly in your template, ie `{{ myservice.total }}`. – ryannjohnson Feb 23 '17 at 01:00

2 Answers2

7

You can use angular BehaviorSubject for communicating with non related component.

Service file 

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


@Injectable()
export class commonService {
    private data = new BehaviorSubject('');
    currentData = this.data.asObservable()

    constructor() { }

    updateMessage(item: any) {
        this.data.next(item);
    }

}

First Component 

constructor(private _data: commonService) { }
shareData() {
      this._data.updateMessage('pass this data');
 }

Second component

constructor(private _data: commonService) { }
ngOnInit() {
     this._data.currentData.subscribe(currentData => this.invokeMyMethode())
}

Using above approach you can invoke a method/share data easily with non related components.

More info here

Prashobh
  • 9,216
  • 15
  • 61
  • 91
2

Shared service is a common way of communication between non-related components. Your components need to use a single instance of the service, so make sure it's provided at the root level.

Shared service:

@Injectable()
export class SharedService {

    componentOneFn: Function;

    constructor() { }
}

Component one:

export class ComponentOne {

    name: string = 'Component one';

    constructor(private sharedService: SharedService) {
        this.sharedService.componentOneFn = this.sayHello;
    }

    sayHello(callerName: string): void {
        console.log(`Hello from ${this.name}. ${callerName} just called me!`);
    }
}

Component two:

export class ComponentTwo {

    name: string = 'Component two';

    constructor(private sharedService: SharedService) {
        if(this.sharedService.componentOneFn) {
            this.sharedService.componentOneFn(this.name); 
            // => Hello from Component one. Component two just called me!
        }
    }
}

This post might be helpful as well: Angular 2 Interaction between components using a service

Community
  • 1
  • 1
seidme
  • 12,543
  • 5
  • 36
  • 40
  • Does this still work 10/24/2017? Tried it exactly as specified but the name from comp1 appears undefined when called from comp2. – overboard182 Oct 24 '17 at 14:27