- Forums
- ionic
- Ionic - Simple Example To Pass Data Using A Service
This Page Contains information about Ionic - Simple Example To Pass Data Using A Service By ionicweb in category ionic with 0 Replies. [4843], Last Updated: Mon Jun 24, 2024
ionicweb
Sat Jul 04, 2020
0 Comments
982 Visits
To pass an object between pages, lets use a service. First start with a blank project.
$ionic start blankApp blank --type=angular
change to the newly created directory to go to your new project
$cd blankApp
Next step is to generate a menu page
$ionic generate page menu
Now lets generate a service called navparam
$ionic generate service navparam
All you have to do now is start adding the code to each file:
app.module.ts
import { NavparamService } from './navparam.service';
And add NavparamService to providers
navparam.service.ts
Import isNull and isNullOrUndefined
import { isNull, isNullOrUndefined } from 'util';
add navData variable, setNavData and getNavData functions:
export class NavparamService {
navData:any;
constructor() { }
setNavData(navObj){
this.navData = navObj;
}
getNavData(){
if(isNullOrUndefined(this.navData))
return 0;
return this.navData;
}
}
home.page.ts
Import NavparamService
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { NavparamService } from '../navparam.service';
Add the following decorators to the HomePage constructor:
export class HomePage {
constructor(
private router:Router,
private location:Location,
private navParamService:NavparamService
) {}
btnClicked(){
console.log('btn clicked');
let d = {
hero:"Iron Man",
villan: "Thanos"
}
this.navParamService.setNavData(d);
this.router.navigate(['menu/'])
}
}
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Send data between pages
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button (click)="btnClicked()">View Object</ion-button>
</ion-content>
menu.page.ts
import NavparamService and add the router decorators to the constructors and assign the the data to our object variable
import { ActivatedRoute,Router } from '@angular/router';
import { NavparamService } from '../navparam.service';
add the router decorators, set our data variable and assign the data from the getNavData() function in the service.
export class MenuPage implements OnInit {
data:any;
constructor(
private activatedRoute:ActivatedRoute,
private router:Router,
private navParamService:NavparamService
) {
// get data from service
this.data = navParamService.getNavData();
}
ngOnInit() {
}
}
menu.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Menu Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Hero: {{data.hero}}<br>
Villan: {{data.villan}}
<p>Thanks for checking out this tutorial. Check other tutorials as <a href="https://www.webune.com/forums" target="_blank">Webune Forums</a> </p>
</ion-content>
now you can start the application to see it in action!
$ionic serve