To pass parameter to next page, first we need to make sure that we have 2 pages which is page from and page to. In page from ts file, you have to import router at the top of the file as below.
import { Router, NavigationExtras } from '@angular/router';
Make sure to load in constructor also.
constructor(private router: Router) {
}
Then create one function to navigate to another page with parameter.
somefunction(menu) {
// this.message = name;
let navigationExtras: NavigationExtras = {
queryParams: {
title: this.message,
data: JSON.stringify(menu)
}
};
this.router.navigate([menu.link], navigationExtras);
// alert(this.message);
}
Those function will be called in html file and the menu is based on data that will be passed. Below I provide full code in page from ts file.
import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
message = 'Testing';
menus = [
{
name: 'menu 1',
desc: 'desc 1',
color: 'primary',
link: '/dummy',
image: '',
},
{
name: 'storage',
desc: 'desc 2',
color: 'success',
link: '/storage',
image: '',
},
{
name: 'Users',
desc: 'desc 3',
color: 'tertiary',
link: '/users',
image: '',
},
{
name: 'menu 3',
desc: 'desc 3',
color: 'warning',
link: '/dummy',
image: '',
},
];
constructor(private router: Router) {
// this.somefunction();
}
somefunction(menu) {
// this.message = name;
let navigationExtras: NavigationExtras = {
queryParams: {
title: this.message,
data: JSON.stringify(menu)
}
};
this.router.navigate([menu.link], navigationExtras);
// alert(this.message);
}
}
Then we will proceed with 2nd page which is page to. In this page ts file, we will get the parameter that have been submit to this page. First, you also have to import router at the top of the file as below.
import { ActivatedRoute, Router } from '@angular/router';
Make sure to load in constructor also and get the parameter inside the constructor as below.
constructor(
private route: ActivatedRoute,
private router: Router,
private helper: HelperService,
) {
this.route.queryParams.subscribe(params => {
if (params && params.title && params.data) {
this.title = params.title
this.data = JSON.parse(params.data);
}
});
}
below is the full code for second page.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HelperService } from '../services/helper.service';
@Component({
selector: 'app-dummy',
templateUrl: './dummy.page.html',
styleUrls: ['./dummy.page.scss'],
})
export class DummyPage implements OnInit {
title;
data;
loading;
constructor(
private route: ActivatedRoute,
private router: Router,
private helper: HelperService,
) {
this.route.queryParams.subscribe(params => {
if (params && params.title && params.data) {
this.title = params.title
this.data = JSON.parse(params.data);
}
});
}
ngOnInit() {
// this.presentToast('Trasyy uihdwiue jk', 500);
// this.presentLoading();
this.helper.presentLoading();
setTimeout(() => {
this.helper.dismissLoading();
this.helper.presentAlert();
}, 2000);
}
}
