0

I'm learning Angular2. In order to that, I have 2 components, on the click of one of the components, the other component should be notified and act with that.

This is my code so far:

export class JsonTextInput {
  @Output() renderNewJson: EventEmitter<Object> = new EventEmitter()
  json: string = '';

  process () {
      this.renderNewJson.next(this.json)
  }
}

The process function is being called on the click on the first component. On the second component I have this code:

export class JsonRendered {
  @Input() jsonObject: Object

  ngOnChanges () {
    console.log(1)
    console.log(this.jsonObject)
  }
}

The ngOnChanges is never runned, I dont get how to pass the info from one component to other

EDIT

There is an app component which is parent of those 2 components. None of both is parent of the other

This is how my clasess look now:

export class JsonRendered {
  private jsonObject: Object

  constructor (private jsonChangeService: JsonChangeService) {
    this.jsonChangeService = jsonChangeService
    this.jsonObject = jsonChangeService.jsonObject
    jsonChangeService.stateChange.subscribe(json => { this.jsonObject = json; console.log('Change made!') })
  }
}


export class JsonTextInput {
  json: string = '';

  constructor (private jsonChangeService: JsonChangeService) {
    this.jsonChangeService = jsonChangeService
  }

  process () {
    this.jsonChangeService.jsonChange(this.json)
  }
}

And the service

import {Injectable, EventEmitter} from '@angular/core';
@Injectable()
export default class JsonChangeService {
  public jsonObject: Object;
  
  stateChange: EventEmitter<Object> = new EventEmitter<Object>();
  
  constructor(){
    this.jsonObject = {};
  }
    
  jsonChange(obj) {
    console.log('sending', obj)
    this.jsonObject = obj
    this.stateChange.next(this.jsonObject)
  }

}

Community
  • 1
  • 1
Pablo
  • 9,424
  • 17
  • 55
  • 78

1 Answers1

1

Create a service like so...

    import {Injectable, EventEmitter} from 'angular2/core';
@Injectable()
export class MyService {

  private searchParams: string[];

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

  constructor(){

    this.searchParams = [{}];       

  }    

  change(value) {

    this.searchParams = value;
    this.stateChange.next(this.searchParams);        

  }

}

Then in your component...

import {Component} from 'angular2/core';
import {MyService} from './myService';   


@Component({
  selector: 'my-directive',
  pipes: [keyValueFilterPipe],
  templateUrl: "./src/someTemplate.html",
  providers: [MyService]    

})

export class MyDirective {

  public searchParams: string[];

  constructor(private myService: MyService) {
      this.myService = myService;
      myService.stateChange.subscribe(value => { this.searchParams = value; console.log('Change made!') })
  }

change(){

  this.myService.change(this.searchParams);

}

}

You have to subscribe to the eventemitter, then update your variable. The change event in the service would get fired of from something like...

 (click)="change()"
Pablo
  • 9,424
  • 17
  • 55
  • 78
Judson Terrell
  • 4,204
  • 2
  • 29
  • 45
  • I'm getting `browser_adapter.ts:78 ORIGINAL EXCEPTION: No provider for JsonChangeService!` (That is the name of my service) – Pablo May 28 '16 at 13:59
  • import {JsonChangeService} from './JsonChangeService'; then in your component: providers: [JsonChangeService] – Judson Terrell May 28 '16 at 14:10
  • 1
    also, I highly recommend udemy for angular 2 courses. I used these to learn. They cover basic and advanced techniques! – Judson Terrell May 28 '16 at 14:12
  • For some reason, it still not working. The stateChange is being called correctly, but in the other component the subscribe does not see the change :/ I have added my final code – Pablo May 28 '16 at 14:46
  • Using an EventEmitter in a service is an [anti-pattern](http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter). You should [use an Observable or a Subject](http://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2). – Mark Rajcok May 28 '16 at 23:57
  • After research it looks like observable is indeed a better approach. Also the reason why event emitters wasn't working is the service has to be injected at a parent of both the sibling components. – Judson Terrell May 29 '16 at 03:39