Example 1: passing data from one page to another in ionic 4
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-details',
templateUrl: './details.page.html',
styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
data: any;
constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) {
this.data = this.router.getCurrentNavigation().extras.state.user;
}
});
}
ngOnInit() { }
}
Example 2: passing data from one page to another in ionic 4
import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { DataService } from '../services/data.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
user = {
name: 'Simon Grimm',
website: 'www.ionicacademy.com',
address: {
zip: 48149,
city: 'Muenster',
country: 'DE'
},
interests: [
'Ionic', 'Angular', 'YouTube', 'Sports'
]
};
constructor(private router: Router, private dataService: DataService) { }
openDetailsWithState() {
let navigationExtras: NavigationExtras = {
state: {
user: this.user
}
};
this.router.navigate(['details'], navigationExtras);
}
}
Example 3: passing data from one page to another in ionic 4
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-details',
templateUrl: './details.page.html',
styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
data: any;
constructor(private route: ActivatedRoute, private router: Router) {
}
ngOnInit() {
if (this.route.snapshot.data['special']) {
this.data = this.route.snapshot.data['special'];
}
}
}
Example 4: passing data from one page to another in ionic 4
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DataService } from '../services/data.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
user = {
name: 'Simon Grimm',
website: 'www.ionicacademy.com',
address: {
zip: 48149,
city: 'Muenster',
country: 'DE'
},
interests: [
'Ionic', 'Angular', 'YouTube', 'Sports'
]
};
constructor(private router: Router, private dataService: DataService) { }
openDetailsWithService() {
this.dataService.setData(42, this.user);
this.router.navigateByUrl('/details/42');
}
}
Example 5: passing data from one page to another in ionic 4
import { DataResolverService } from './resolver/data-resolver.service';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'details', loadChildren: './details/details.module#DetailsPageModule' },
{
path: 'details/:id',
resolve: {
special: DataResolverService
},
loadChildren: './details/details.module#DetailsPageModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Example 6: passing data from one page to another in ionic 4
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data = [];
constructor() { }
setData(id, data) {
this.data[id] = data;
}
getData(id) {
return this.data[id];
}
}
Example 7: passing data from one page to another in ionic 4
ionic g service services/data
ionic g service resolver/dataResolver
Example 8: passing data from one page to another in ionic 4
import { DataService } from './../services/data.service';
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class DataResolverService implements Resolve<any> {
constructor(private dataService: DataService) { }
resolve(route: ActivatedRouteSnapshot) {
let id = route.paramMap.get('id');
return this.dataService.getData(id);
}
}
Example 9: passing data from one page to another in ionic 4
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-details',
templateUrl: './details.page.html',
styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
data: any;
constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
if (params && params.special) {
this.data = JSON.parse(params.special);
}
});
}
}
Example 10: passing data from one page to another in ionic 4
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
user = {
name: 'Simon Grimm',
website: 'www.ionicacademy.com',
address: {
zip: 48149,
city: 'Muenster',
country: 'DE'
},
interests: [
'Ionic', 'Angular', 'YouTube', 'Sports'
]
};
constructor(private router: Router) { }
openDetailsWithQueryParams() {
let navigationExtras: NavigationExtras = {
queryParams: {
special: JSON.stringify(this.user)
}
};
this.router.navigate(['details'], navigationExtras);
}
}