TypeScript ionic-angular NavParams Examples

Programming Language: TypeScript

Namespace/Package Name: ionic-angular

Class/Type: NavParams

Examples at hotexamples.com: 30

NavParams is a library in Ionic-Angular that is used to pass data between different pages in your application. It is a class that contains a set of key-value pairs, where the key corresponds to the name of the parameter and the value is the actual value.

Here are some code examples:

Example 1:

// Sender page
import { NavController } from '@ionic/angular';
import { NavParams } from '@ionic/angular';

constructor(private navController: NavController) { }

navigateToPage() {
  let navigationExtras: NavigationExtras = {
    state: {
      data: 'Hello World'
    }
  };
  this.navController.navigateForward('/receiver-page', navigationExtras);
}

// Receiver page
import { NavParams } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';

constructor(private navParams: NavParams) { }

ngOnInit() {
  console.log(this.navParams.get('data')); // Output: Hello World
}

In this example, we pass data from the sender page to the receiver page using NavParams. We use the `navigateForward()` method to navigate to the receiver page. The `state` parameter is used to pass the data, which is a key-value pair where the key is `data` and the value is `Hello World`. We then retrieve this data on the receiver page using the `get()` method and passing in the name of the parameter.

Example 2:

// Sender page
import { NavController } from '@ionic/angular';
import { NavParams } from '@ionic/angular';

constructor(private navController: NavController) { }

navigateToPage() {
  let data = {
    name: 'John Doe',
    age: 25,
    email: 'johndoe@example.com'
  };
  this.navController.navigateForward('/receiver-page', { queryParams: data });
}

// Receiver page
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params); // Output: {name: "John Doe", age: "25", email: "johndoe@example.com"}
  });
}

In this example, we pass data from the sender page to the receiver page using query parameters. We use the `navigateForward()` method to navigate to the receiver page and pass the data using the `queryParams` parameter. The data is a key-value pair where the key is the name of the parameter and the value is the actual value. We then retrieve this data on the receiver page using the `queryParams` property of the `ActivatedRoute` service. Package Library: `@ionic/angular` and `@angular/router`

TypeScript NavParams - 30 examples found. These are the top rated real world TypeScript examples of ionic-angular.NavParams extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

get(30)

Example #1

Show file

File: sections.ts Project: alexandrastoica/ionic2-dementia-test-app

	constructor(public getData: Data, public nav: NavController, private navParams: NavParams, public sqlite: SQLiteService){
		this.nav = nav;
    this.testId = this.navParams.get('testId');
	}

Example #2

Show file

File: alterar-senha.ts Project: cleybsoncardoso/SAEinfo

 constructor(private nav: NavController, private alertController: AlertController,private params:NavParams) {
   this.nav = nav;
   this.senha1 = "";
   this.senha2 = "";
   this.id = params.get("parametro");
 }

Example #3

Show file

File: avatar-preview.ts Project: eongoo/leader

 constructor(public params: NavParams, public viewCtrl: ViewController) {
   this.guest = this.params.get('guest');  
   this.loaded = false;
 }

Example #4

Show file

File: userprofile.ts Project: Khyunwook/soombarcode-client

 constructor(private nav: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
   this.userinfo = this.navParams.get('user');
   this.data = this.navParams.get('data')
 }

Example #5

Show file

File: product-page.ts Project: SofiaReis/drag-shop

 constructor(private nav: NavController, navParams: NavParams) {
   this.product = navParams.get('product');
   console.log(this.product);
 }

Example #6

Show file

File: post-detail.ts Project: brenopolanski/labs

 ionViewDidLoad() {
   this.postId = this.navParams.get('postId');
   console.log(this.postId);
   this.post = this.data.getPostById(this.postId);
 }

Example #7

Show file

File: image.ts Project: SATS-Seminary/moodlemobile2

 constructor(private viewCtrl: ViewController, params: NavParams, translate: TranslateService) {
     this.title = params.get('title') || translate.instant('core.imageviewer');
     this.image = params.get('image');
     this.component = params.get('component');
     this.componentId = params.get('componentId');
 }

Example #8

Show file

File: more-menu.ts Project: elylucas/denverdevdayapp

 constructor(public viewCtrl: ViewController, params: NavParams) {
   this.isFavorite = params.get('isFavorite');
 }

Example #9

Show file

File: section-selector.ts Project: jleyva/moodlemobile2

 constructor(navParams: NavParams, courseHelper: CoreCourseHelperProvider, private viewCtrl: ViewController) {
     this.sections = navParams.get('sections');
     this.selected = navParams.get('selected');
 }

Example #10

Show file

File: index.ts Project: SATS-Seminary/moodlemobile2

 constructor(navParams: NavParams) {
     this.module = navParams.get('module') || {};
     this.courseId = navParams.get('courseId');
     this.selectedGroup = navParams.get('group') || 0;
     this.title = this.module.name;
 }

Show more examples