IONIC/Angular: HTML doesnt display information from ts file

Question

Im having a problem with showing the information on my html page im sending an object from a "home-page.ts" to "informacion-bar.page.ts" then i show them on html with {{ res?.title }} that works on my another projects but I dont know why now its not working so I need a little help

Sorry for my low level english

Here i have my typescript file where i get the data and assign the value to "res" and ill use it on my html

Here is my html where you can see its really simple using ionic components and trying to show information

And my console that show the object with the "title" and "snippet" property

console doesnt send me any error just a little warning "Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?" that i ignore and my result is showing "Information: ' '" just blank and the label is blank too

TS

export class InformacionBarPage implements OnInit {
  public res: any;
  constructor(public events2: Events) {
    this.events2.subscribe('my-message', (data) => {
      this.res = data;
      console.log(this.res);
      console.log(this.res.snippet);
    });
   }

  ngOnInit() {
  }

}

HTML

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
        test: {{ res?.snippet }}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Console:

{position: {…}, title: "Bar de prueba 1", snippet: "Billar, Espacioso, Tranquilo", icon: {…}, animation: undefined, …}
animation: undefined
disableAutoPan: false
draggable: false
flat: false
icon: {url: "assets/imgs/marker_bar.png", size: {…}, anchor: Array(2)}
infoWindowAnchor: (2) [16, 0]
noCache: false
opacity: 1
position: {lng: -6.206721, lat: 36.528835}
rotation: 0
snippet: "Billar, Espacioso, Tranquilo"
title: "Bar de prueba 1"
visible: true
zIndex: 0
__proto__: Object

Answer 1

SOLVED i solved it thanks to this angularjs - events-publish-subscribe

In resume you need to load and get ready the subscribe on 'page2' before you send data from page1, so you need to subscribe before publish, then you can move to page2, subscribe and then publish data from page1 i'll let you an example

page 1: navigate to page2, load his constructor THEN "publish"

enviarPosicion() {
this.zone.run(() => {
  this.nav.navigateForward('/lista-bares').then(() => {
    this.events1.publish('posicion_usuario', this.posicion);
  });
});

}

page 2: load page2 and subscribe BEFORE publish, then you load this subscribe and THEN you publish the data as i show you on last code

    this.events1.subscribe('posicion_usuario', (pos) => {
    this.lat = pos.lat;
    this.lng = pos.lng;
  });
}

subscribe of page 2 needs to be on constructor so it load when you navigate to page2.

Answer 2

You should instead make the res an observable within the call back by first importing

import { Observable, of} from 'rxjs';

and then

this.events2.subscribe('my-message', (data) => {
  this.res = of(data);
  //
});

and then view it as

{{ (res | async)?.propertyname }}

I'm assuming you are using ionic 4. In previous versions Observables are imported differently.

Answer 3

I have faced the same issue, I resolved it using NgZone from @angular/core. Don't know if it is the best way but it did work for me.

import {NgZone} from '@angular/core';

add it in constructor :

constructor(private zone: NgZone) {}

wrap the code inside zone like this :

this.events2.subscribe('my-message', (data) => {
  this.zone.run(() => {
    this.res = data;
  })
});