Ionic2 update page view from app

Question

I'm learning angularjs2, and/also using ionic 2! In ionic I create a side menu in:

/app.html:

  <ion-content>
<ion-item-group>
  <ion-item-divider light>Cats</ion-item-divider>
  <ion-item *ngFor="#cat of categories" (click)="filter('category', cat.id)">{{cat.name}}</ion-item>
</ion-item-group>

When I click in any of these categories, I want send the category id to one of my pages (The HomePage).

I'm trying to set the value to HomePage class in app.js:

  filter(key, value){
HomePage.prototype.setFilters(value);  }

And reading the value in HomePage class with:

/home/home.js:

  setFilters(value) {
      this.ViewValue = value;
      console.log(this.ViewValue);
  }

The problem Is, can't print that value in HomePage view. I'm trying with: /home/home.html:

<ion-content class="getting-started">
  Selected category:
  {{ViewValue}}
</ion-content>

When I click in any category in left menu, the ViewValue doesn't change. When I run console.log, I can get my category, but it doesn't change in view.

What I'm doing wrong? Or is there a better way to do it?

Answer 1

I'd suggest using the nav controller to navigate to the new page passing the category id through navigation parameters. Something like this:

nav.push(HomePage, {categoryId: 123});  

and in the HomePage:

constructor(nav: NavController, navParms: NavParams) {
    this.myCategoryId = navParms.data.categoryId;
}

Answer 2

This is how it can be done in TypeScript using the subscription pattern. There maybe differences with pure JavaScript code:

export class FilterEventService extends Subject<any> {
  constructor() {
   super();
  }
  valueChanged(value:any){
    super.next(value);
  }
}

In your @App component add the service :

@App({
  providers: [FilterEventService]
})
export class AppComponent{
  constructor(@Inject(FilterEventService) private filterEventService:FilterEventService){}
   filter(key:string, value:any){
    this.filterEventService.valueChanged(value);
   }
}

In your home:

export class HomeComponent {
  constructor(@Inject(FilterEventService) private filterEventService:FilterEventService) {
    filterEventService.subscribe((value) => {
         this.ViewValue = value;
         console.log(this.ViewValue);
    });
  }
}