pass variable on item click from one page to another in ionic2
<p>I'm working with ionic2 and I have a static list of items (ion-item).</p>

<p>When I click on an item I need to pass a variable (wcyear in this case) to a second page.
The problem is that if I print to console the variable I passed (wcyear) I get undefined. </p>

<p><strong>Note</strong>: If I replace wcyear with a constant string in <code>home.ts</code> (i.e. <code>year:"helloworld"</code>) then I see "helloworld" printed in my console.</p>

<p>This makes me think I have an error in my home.html but I can't see it. </p>

<p><strong>home.html</strong></p>

<pre><code>&lt;ion-header&gt;
  &lt;ion-navbar&gt;
    &lt;ion-title&gt;
      Ionic 2 app
    &lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
&lt;/ion-header&gt;

&lt;ion-content padding&gt;
&lt;ion-list&gt;
  &lt;ion-item let wcyear="2014" (click)="goToYear(wcyear)"&gt;
    &lt;ion-avatar item-left&gt;
      &lt;img src="img/2014.png"&gt;
    &lt;/ion-avatar&gt;
    &lt;h2&gt;2014&lt;/h2&gt;
    &lt;h3&gt;some text&lt;/h3&gt;
  &lt;/ion-item&gt;
  &lt;ion-item let wcyear="2010" (click)="goToYear(wcyear)"&gt;
    &lt;ion-avatar item-left&gt;
      &lt;img src="img/2010.png"&gt;
    &lt;/ion-avatar&gt;
    &lt;h2&gt;2010&lt;/h2&gt;
    &lt;h3&gt;some text&lt;/h3&gt;
  &lt;/ion-item&gt;
  &lt;ion-item let wcyear="2006" (click)="goToYear(wcyear)"&gt;
    &lt;ion-avatar item-left&gt;
      &lt;img src="img/2006.png"&gt;
    &lt;/ion-avatar&gt;
    &lt;h2&gt;2006&lt;/h2&gt;
    &lt;h3&gt;some text&lt;/h3&gt;
  &lt;/ion-item&gt;
  &lt;ion-item let wcyear="2002" (click)="goToYear(wcyear)"&gt;
    &lt;ion-avatar item-left&gt;
      &lt;img src="img/2002.png"&gt;
    &lt;/ion-avatar&gt;
    &lt;h2&gt;2002&lt;/h2&gt;
    &lt;h3&gt;some text&lt;/h3&gt;
  &lt;/ion-item&gt;
&lt;/ion-list&gt;
</code></pre>

<p></p>

<p><strong>home.ts</strong></p>

<pre><code>import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {YearDashboardPage} from '../year-dashboard/year-dashboard';

@Component({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
  constructor(public navCtrl: NavController) {
    this.navCtrl = navCtrl;
  }

  goToYear(wcyear){
    this.navCtrl.push(YearDashboardPage, {
      year: wcyear,
    });
  }

}
</code></pre>

<p><strong>year-dashboard.ts</strong></p>

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


@Component({
  templateUrl: 'build/pages/year-dashboard/year-dashboard.html',
})
export class YearDashboardPage {

  selectedYear
  constructor(private navCtrl: NavController, private navParams: NavParams) {
     console.log(navParams.get('year'));  // I get undefined
  }

}
</code></pre>