1

I've been using events in my ionic application, where i subscribe in one page, and publish the event in the other page. Now I see a warning that Events are going to be changed with Observables and Redux state and effect. I was using Events mainly to call for component function changes outside it, so I had a components for example:

Component1.ts

this.events.subscribe('event:addValue1', (data: any) => {
this.valueName = 'VALUE1';
});

this.events.subscribe('event:addValue2', (data: any) => {
this.valueName = 'VALUE2';
});

and than outside this component I was calling the publish methods from any page, like:

Page1.ts

this.events.publish('event:addValue1');

Page2.ts

this.events.publish('event:addValue2');

By this i was able to change the data (this.valueName) outside the Component1.ts from any other page, simply by publishing the desired event. I know that this might not sound or be right approach, but It was the only way I was doing changes to my Component1.ts outside it from any page.

I have now changed this and just put separate functions and than i access them via ViewChild component name like

@ViewChild('component') component: any;
....
this.component.functionAddValue1().

and additionally I send additional params via Angular NavigationExtras if i need to calculate and call some function from the Component1.ts, lets say if I navigate to some route. Before this I was just calling the events.publish and I was able to make the changes to the Component1.ts on the fly.

Nikola Noxious Dimitrov
  • 265
  • 3
  • 17
  • You want the code in ionic or in redux? – Mostafa Harb Feb 16 '20 at 19:31
  • My application is in Ionic4, so yes. I have found this: https://www.javascripttuts.com/adding-redux-to-an-ionic-application/ Can I use redux, or if not how can i achieve this with observables? – Nikola Noxious Dimitrov Feb 16 '20 at 20:34
  • I have added an answer , its self made service that i use to gat the same result with same way as event plugin. – Mostafa Harb Feb 16 '20 at 20:45
  • Does this answer your question? [How to fix member Event from @ionic/angular error in Ionic 5](https://stackoverflow.com/questions/60197785/how-to-fix-member-event-from-ionic-angular-error-in-ionic-5) – Shashank Agrawal Feb 17 '20 at 05:26

1 Answers1

1

Create event service. In the EventService.ts:

    export class EventService {
    private dataObserved = new BehaviorSubject<any>('');
    currentEvent = this.dataObserved.asObservable();
    constructo(){}

    publish(param):void {
      this.dataObserved.next(param);
    }
   }

For publishing the event from example page1:

    constructor(public eventService:EventService){}
updatePost(value){
this.eventService.publish({name:'post:updated',params:value});
}

In page 2:

constructor(public eventService:EventService){
  eventService.currentEvent.subscribe(value=>{
if(value.name=='post:updated'){
//get value.name
}else if(value.name=='another:event'){
//get value or update view or trigger function or method...
}
 // here you can get the value or do whatever you want

});
}
Mostafa Harb
  • 1,558
  • 1
  • 6
  • 12
  • What if I want to have 3 events in my first page. Also page 1 is where i have some code that needs to be run, so when i publish the ''event name'' in page 2 i need to know which action to be done in page 1, because all 3 events are doing different things and code in page 1. – Nikola Noxious Dimitrov Feb 16 '20 at 21:41
  • You add another subject behavior for event type, and pass it in publish methid before param, and you get the value of first whick will be eventname and the current event will be the data – Mostafa Harb Feb 16 '20 at 22:10
  • this.event.currentEvent.subscribe(data => { this.page1value === 'VALUE1'; }); I have 3 different events in Page1 like this one where, based on which event is published from Page2 I need to publish it and therefore change the page1value in my page1. For example other events are changing page1value to VALUE2 and VALUE3. I am still not sure how can i do this with your approach. – Nikola Noxious Dimitrov Feb 16 '20 at 22:20
  • For example you have publish(name,param){this.dataObserved.next({name:name,params:param});} and by that when you get the observable you get the value , u check if data.name==what u want then get its value... that all – Mostafa Harb Feb 16 '20 at 22:39
  • I understand this but i am still not sure how its going to work for my needs and state management. Your example works in a way of: https://ionicframework.com/docs/v3/api/util/Events/ . I need more to be able to change set of variables and functions from page1 in just one call or one publish method. I don't need to pass value and than get that data in page2 by the subscription. My need is the opposite way, to use just publish in page2, and have the subscription with all set of funtions relevant for page1 in there. – Nikola Noxious Dimitrov Feb 17 '20 at 00:10
  • Look , can you give me your example using the main events plugin and i could tell you how to achieve it using observables, if you can edit tour question with the given you do in events plugin. – Mostafa Harb Feb 17 '20 at 00:15
  • Hi @Mostafa Harb. Sorry maybe I needed to be more clear and specific about my problem and use case, although your answer was right for using the Observables. I have now edited and updated my question so you can take a look. Thank you. – Nikola Noxious Dimitrov Feb 17 '20 at 15:58
  • I updated the answer, what is the exact thing you want to achieve – Mostafa Harb Feb 17 '20 at 16:59