EventEmmiter send data to no sibling component - Angular 2

Question

I had one component that consisted of button that triggers function and table that generate elements according to data that i got from service and that function.

But I had to split that component, and now i have only button on one component, and function and table with data on other component.

In first component with button I set EventEmmiter like this:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { ConceptService } from "app/services/rest/concept.service";

@Component( {
    selector: 'co-calculation',
    templateUrl: './co-calculation.component.html',
    styles: []
} )

export class CoCalculationComponent implements OnInit {

    dataSent: EventEmitter<any> = new EventEmitter();

    constructor( private conceptService: ConceptService ) { }

    ngOnInit() {}

    calculate(){
      this.conceptService.calculateCoDatabase().subscribe( (response:any) => {

            this.dataSent.emit(response);

           }); } }

On other component I have function that I want to triger when I click on button and instead want to set emit to replace service subscription on start of function.

2nd component:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

import { ConceptService } from "app/services/rest/concept.service";
import { CoCalculationComponent } from "app/components/02_top/scm/co-calculation/co-calculation.component";

@Component( {
    selector: 'co-database-table',
    templateUrl: './co-database-table.component.html',
    styles: []
} )
export class CoDatabaseTableComponent implements OnInit {

    data;

    constructor( private conceptService: ConceptService ) {  }

    ngOnInit() {
    }

    generateTable(){

        this.conceptService.calculateCoDatabase().subscribe( (response:any) => {

            this.data = response;
            console.log('data'); 
//rest of function is irrelevant//
}

I don't know how to trigger function in second component and pass emit from first component instead of service subscribe. Thanks

Ashish Ranjan · Accepted Answer · 2018-04-19T22:52:58.793

3

Now, this will depend upon what is the relation between the two components now. We can use event Emitters if we have a parent child relationship and you want to call a method on parent when the button is clicked in child, show us the relationship, and we can explain how to do it.

If they are not related at all, for then you can use a service and create a Subject there, which can both be ab observer and an Observable.

Have a service like:

@Injectable()
export class ActionService {

  private actionSource = new Subject<boolean>();
  actionSourceObservable = this.actionSource.asObservable();

  constructor() { }

  buttonClicked() {
    this.actionSource.next(true)
  }

}

Now, inject the service in both the components, In the first component when you click the button call a function like:

foo() {
    // do your job here and then:
    this.actionService.buttonCliked();
}

In the other component, have something like this in your ngOnInit()

this.actionService.actionSourceObservable.subscribe(() => {
    // call the function in the second component, for example
    secondCompFunc();
})

edited Apr 19 '18 at 22:52

answered Apr 19 '18 at 19:58

Ashish Ranjan

12,760
5
27
51

My components are not siblings, so there is no parent-child connections ...I suppose there is some other way? – John Theoden Apr 19 '18 at 22:44
If there is no parent-child connection, then you have got to use the `service` method as I have explained. – Ashish Ranjan Apr 19 '18 at 22:45
I just noticed, don't initialize the Subject while creating it. I have changed the code. – Ashish Ranjan Apr 19 '18 at 22:53
You have to import Subject for that: something like: `import { Subject } from 'rxjs/Subject';` – Ashish Ranjan Apr 19 '18 at 23:11

score 1 · Answer 2 · answered Apr 19 '18 at 20:12

Suppose you have a parent component that holds <cost-calculation></cost-calculation> and <cost-database-table></cost-database-table> components.

Step1: Change your code to take data as @Input like this

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { ConceptService } from "app/services/rest/concept.service"; import { CostCalculationComponent } from "app/components/02_top/scm/cost-calculation/cost-calculation.component";

import * as OC from "oc-core-client";

@Component( { selector: 'cost-database-table', templateUrl: './cost-database-table.component.html', styles: [] } ) export class CostDatabaseTableComponent implements OnInit {

@Input() data:any;

constructor( private conceptService: ConceptService ) {  }

ngOnInit() {
}

}

Notice data is now @Input() data:any

Step2: Remove generateTable() method, the data will be updated on onChange lifeCycle

Step3: On your parent component declare data as variable and create method that take data as parameter like this

data:any

// code removed for simplicity

updateData(data:any){
 this.data = data;
}

Step4: Ony your parent template add the following

<cost-calculation (dataSent)=updateData($event)></cost-calculation>

<cost-database-table [data]="data"></cost-database-table>

cost-calculation component will get the data from the service and emit it. when data is emitted, updateData method in parent component is going to be invoked and it will set the data property to be the emitted data.

The parent will then pass the emitted data to database-table component as input

My components are not siblings, so there is no parent-child connections ...I suppose there is some other way? — John Theoden, Apr 19 '18 at 22:44

EventEmmiter send data to no sibling component - Angular 2

2 Answers2