How to use navParams?

Ionic Framework ionic-v3
1

Hi!

I have a blank ionic 2 project and there is a page with a list. When you click on a list item you should see the detail view of the item. Here are my list files:

list.html:

<ion-navbar *navbar>
  <ion-title>list</ion-title>
</ion-navbar>

<ion-content padding class="list">
    <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
    </ion-list>
</ion-content>

list.js:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {ItemDetailPage} from '../item-detail/item-detail';

@Component({
  templateUrl: 'build/pages/list/list.html',
})
export class ListPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
      this.nav = nav;

      this.items = [
          {title: 'Hi1', description: 'whats up?'},
          {title: 'Hi2', description: 'whats up?'},
          {title: 'Hi3', description: 'whats up?'}
      ];
  }

  viewItem(item){
      this.nav.push(ItemDetailPage, {
          item: item
      });
  }
}

And here are my detail view files:

detail-view.html:

<ion-navbar *navbar>
  <ion-title>{{title}}</ion-title>
</ion-navbar>

<ion-content padding class="item-detail">
    <ion-card>
        <ion-card-content>
            {{description}}
        </ion-card-content>

    </ion-card>  
</ion-content>

detail-view.js:

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/item-detail/item-detail.html',
})
export class ItemDetailPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(navParams: NavParams) {
      this.navParams = navParams;

      this.title = this.navParams.get('item').title;
      this.description = this.navParams.get('item').description;
  }
}

When I use “ionic serve” I get the following message:

SyntaxError: C:/…/app/pages/item-detail/item-detail.js: Unexpected token (18:23) while parsing file: …

So I think the constructor of the detail view dont work this way. But I found nowhere something what could help me. I think this solution is deprecated because the tutorial I found is from 2015. But like I said, I didnt found something usefull about it. My Ionic Framework Version is 2.0.0-beta.8

2

You are feeding TypeScript to a JavaScript project. I would highly recommend using TypeScript instead, but if you insist on using JavaScript, you’ll need to learn how to manually transpile all the TypeScript example code you’ll find in the wild.