Pass object with route ionic 4

ionic 4 navparams
ionic 4 pass data between tabs
ionic 5 pass data between pages
ionic 4 navcontroller
ionic passing data between pages
ionic 4 get current route
ionic 4 navigation
how to set route in ionic 4

I am new to IONIC 4 and I want to pass an object from one screen to another screen. My first screen is screen1 and I want to pass "model" object of type "any" from screen1 to screen2.

Currently i am navigating from my screen1 to screen2 using below code.

this.router.navigateByUrl('screen2/');

How can i pass "model" object with this route?

I searched on google for a solution but I found nothing related my question. I just found only one thing that we can pass data with URL using queryparams but I want to keep data private and don't want to show data in URL.

Anyone knows, how can I do that?


My suggestion to you is to implement a resolver

Take a look at my DEMO at StackBlitz to see it in action

Implementing a resolver:

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private myService: MyService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    // return the data you need in your component using your service 
    // route params will sit in - route.params.id
  }
}

Declaring it:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

Using it:

@Component({
  ...
})
export class TeamCmp {
  constructor(private activatedRoute: ActivatedRoute) {
    // the data sits here - this.activatedRoute.snapshot.data;
  }
}

Pass object with route ionic 4, My suggestion to you is to implement a resolver. Take a look at my DEMO at StackBlitz to see it in action. Implementing a resolver: How to pass data with an angular router in ionic 4. Ionic 5 projects can be created using Angular or other frameworks like a React. If you are using an Angular framework for the ionic project, then we can use the state object of Angular, this support came since the release of Angular 7.2.


You can simply do it by using navigate of Router

    this.router.navigate(['screen2', {modelName: model}]);

and receive by ActivatedRoute

    this.activatedRoute.snapshot.paramMap.get('modelName');

how to pass data with angular router in ionic 4., Using a state object of an Angular router object to pass data between components. Reading data at the activated route component. Using NavigationExtras  I am new to IONIC 4 and I want to pass an object from one screen to another screen. My first screen is screen1 and I want to pass "model" object of type "any" from screen1 to screen2. Currently i am navigating from my screen1 to screen2 using below code. this.router.navigateByUrl('screen2/'); How can i pass "model" object with this route?


Since your question was 'how do I send stuff from one page to another', the solution needn't be constrained to using the router: another alternative is using storage.

import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

blah() {
    this.storage.set('importantThing', this.importantThing);
    this.router.navigateByUrl('my-page/new-subpage');
}

And then in the receiving page:

await this.storage.get('importantThing').then(result => {
      this.importantThing= result;
      console.log('my importantThing is', this.importantThing);
    });

Just throwing it out there as an alternative. It's pretty useful the way my app is structured. The item will persist behind the scenes in storage until you delete it. Also may be useful, or not. Depends on what you need, I suppose! Hope it's useful.

Ionic 4 for Beginners : Passing Object between pages, I want to pass value one page to another page home.html <ion-item Ionic 4 navigate with data object to another page route: ActivatedRoute) {} // this.sub = this.route.params.subscribe(params => { this.id = params['id']; });. With previous Ionic versions you could also supply complete objects with a lot of information to another page, but with the new version this has changed. By using the URL routing, you can (and should) only pass something like an objects ID (to be used in a HTTP request) to the following page.


Ionic 4 for Beginners : Passing data between pages, I am new to IONIC 4 and I want to pass an object from one screen to another screen. My first screen is screen1 and I want to pass "model" object of type "any"​  Implementing a Master/Detail pattern (i.e. where you display a list of items on one page and the details for that item on another page) is extremely common in Ionic applications, and I think this is a concept a lot of developers will quickly butt heads with after switching to Angular routing.


How to pass data from 1 page to another using navigation in Ionic 4 , Ionic 4 doesn't have a universal NavParams object anymore. Navigation is based on Angular routing. Hence the preferred way for passing  Everything you know about routing using React Router carries over into Ionic React. Let's take a look at the basics of an Ionic React app and how routing works with it. Routing in Ionic React. Here is a sample App component that defines a single route to the "/dashboard" URL. When you visit "/dashboard", the route renders the DashboardPage


Pass object with route ionic 4 - angular - html, That object can then be retrieved using NavParams on the DetailPage . Passing Data to Another Page with Angular Routing. There are a few  With Ionic 4 the routing changed to the standard Angular router and there are different ways to show pages and modals. In this Quick Win we will look at the different options to push pages onto our navigation stack by using the routing system but also how to use other forms like a modal or popover.