Loading a view in Ionic2 with Angular2 after a successful subscription

Question

Loading a view in Ionic2 with Angular2 after a successful subscription

After completing an http post request, I want to navigate to the next view in my app. Here is a breakdown of the three services I am using:

The server service handles generic http calls such as get and post requests.
The city service stores a list of cities data that is retrieved by calling the server service.
The drill service drills into the city list and displays information about a specific city once the data is received from the city service.

In Angular 1, I would pass a callback function to denote when it's okay to load the page or perform an action after receiving the data. However, I'm facing challenges in version 2 on achieving this after making an http call.

This is the code snippet for the server service used for generic post or get requests:

post(data){       
 var postData = 'data='+JSON.stringify(data);

 return this.http.post(this.server, postData, {
  headers: this.headers
 })
 .map(res => res.json());          
}

The city service also utilizes the post(data) method from the server service, and it stores the retrieved data for reuse throughout the app:

viewCity(send){   
this.server.post(send).subscribe((data) => {        
    this.data.cityData = data.city;
    //I WANT TO LOAD THE VIEW HERE
});
}

When I call viewCity from the drill service, how can I make Ionic change the view after the call completes?

I have tried using a callback, but the function passed in is null and doesn't work. Could the issue be related to incorrect TypeScript syntax?

EDIT / UPDATE:

I managed to make it work with a solution that I am not entirely satisfied with. Can someone suggest an improvement?

  viewCity(r){    
  this.cityService.getCity(r)
  .subscribe((data) => {  
      this.cityService.data.city = data.city; 
      this.nav.push(RestaurantPage); 
  });
  }

typescript angular ionic2

Answer 1

Answer №1

To receive updates about when a service is completed and navigate to the new page, consider subscribing to the service. Here's an example on this plunker.

In the calling page, implement the subscription to the service like this:

  constructor(private nav: NavController, private service: MyService) {         
        // Redirect user to Page1 upon receiving data from the service
        this.service.getData.subscribe((receivedData) => {
            this.nav.push(Page1, { data : receivedData });
        });         
    }

Note that data can also be passed to the next page as a parameter.

In the service, use the next method on the observer instance to notify all subscribers (in this case, the page that called the service) to proceed further.

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MyService { 

  private getDataObserver: any;
  public getData: any;

  constructor(){
    // Initialize the observer
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getDataFromServer() {
    // Simulate fetching data from server
    setTimeout(() => {
      this.getDataObserver.next("This is a new message retrieved from the service.");
    }, 3000);
  }
}

EDIT:

viewCity(r){    
  this.cityService.getCity(r)
  .subscribe((data) => {  
      this.cityService.data.city = data.city; 
      this.nav.push(RestaurantPage);  
  });
  }

The assumption is that the viewCity(r){...} method belongs to one of your pages since you have access to the NavController instance.

A suggestion is to set the city value inside the cityService.getCity(r) method itself within the cityService, eliminating the need to set it again in the same service. After fetching the data, simply redirect to the RestaurantPage:

viewCity(r){    
  this.cityService.getCity(r).subscribe((data) => {  
      this.nav.push(RestaurantPage);
  });
}

Answer 2

To receive updates about when a service is completed and navigate to the new page, consider subscribing to the service. Here's an example on this plunker.

In the calling page, implement the subscription to the service like this:

  constructor(private nav: NavController, private service: MyService) {         
        // Redirect user to Page1 upon receiving data from the service
        this.service.getData.subscribe((receivedData) => {
            this.nav.push(Page1, { data : receivedData });
        });         
    }

Note that data can also be passed to the next page as a parameter.

In the service, use the next method on the observer instance to notify all subscribers (in this case, the page that called the service) to proceed further.

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MyService { 

  private getDataObserver: any;
  public getData: any;

  constructor(){
    // Initialize the observer
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getDataFromServer() {
    // Simulate fetching data from server
    setTimeout(() => {
      this.getDataObserver.next("This is a new message retrieved from the service.");
    }, 3000);
  }
}

EDIT:

viewCity(r){    
  this.cityService.getCity(r)
  .subscribe((data) => {  
      this.cityService.data.city = data.city; 
      this.nav.push(RestaurantPage);  
  });
  }

The assumption is that the viewCity(r){...} method belongs to one of your pages since you have access to the NavController instance.

A suggestion is to set the city value inside the cityService.getCity(r) method itself within the cityService, eliminating the need to set it again in the same service. After fetching the data, simply redirect to the RestaurantPage:

viewCity(r){    
  this.cityService.getCity(r).subscribe((data) => {  
      this.nav.push(RestaurantPage);
  });
}

Loading a view in Ionic2 with Angular2 after a successful subscription

Answer №1

Similar questions

Encountering an error during the building of an AOT compilation due to a jointly used

Guide to easily printing a page in Angular 4 using TypeScript

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

React JS displayed the string of /static/media/~ instead of rendering its markdown content

Angular: defining custom module imports - specifying the file path

Promise rejection not handled: The play() function was unsuccessful as it requires the user to interact with the document beforehand

Leverage the power of ssh2-promise in NodeJS to run Linux commands on a remote server

Inspecting a union type with a TypeScript property validation

Why is my data not showing correctly? - Utilizing Ionic 3 and Firebase

Assessing Directives by Injecting the Hosting Component

Are the Angular2 Material components able to work with previous versions?

Exploring ways to expand the theme.mixins feature in MUI 5

Attempting to create a login feature using phpMyAdmin in Ionic framework

Ionic 3 Storage Timing Explained

The TypeScript error message indicates that the property 'forEach' is not found on the 'FileList' type

Create a custom validation function that accepts additional parameters

Can someone show me how to properly set up nested child routes in Angular 2?

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

Can an Angular 5 web application be developed without using Node.js/npm?

The type '(props: Props) => Element' cannot be assigned to the type 'FunctionComponent<FieldRenderProps<any, HTMLElement>>' in React-final-form