title: Angular: pass parameter to another component
body: <p>I'm stuck with Angular2, I would like to pass parameters from a <strong>Products page</strong> (eg: product ids) to a <strong>Payment page</strong>, here is what I tried so far:</p>
  
  <p><a href="https://i.stack.imgur.com/mgrd9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mgrd9.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>payment.html :</p>
  </blockquote>
  
  <pre><code>  Message: {{message}}
    &lt;page-products&gt;&lt;/page-products&gt;
  </code></pre>
  
  <blockquote>
    <p>payment.ts :</p>
  </blockquote>
  
  <pre><code>import { Component, ViewChild, AfterViewInit} from '@angular/core';
  import { ProductsPage } from "../../products/products";
  
  @IonicPage()
  @Component({
      selector: 'page-payment',
      templateUrl: 'payment.html'
  })
  export class PaymentPage implements AfterViewInit {
  
       @ViewChild(ProductsPage) child;
  
       constructor(public navCtrl: NavController) {}
  
       message:string;
  
       ngAfterViewInit() {
               this.message = this.child.message
       }
      }
  </code></pre>
  
  <blockquote>
    <p>products.ts :</p>
  </blockquote>
  
  <pre><code>import { Component} from '@angular/core';
  import { IonicPage, NavController } from 'ionic-angular';
  
  @IonicPage()
  @Component({
      selector: 'page-products',
      templateUrl: 'products.html',
  })
   export class ProductsPage {
  
       message: string = "Hola Mundo!"
  
       constructor(public navCtrl: NavController) {}
  
       goToPayment() {
           this.navCtrl.setRoot('PaymentPage');
       }
   }
  </code></pre>
  
  <blockquote>
    <p>product.html :</p>
  </blockquote>
  
  <pre><code>&lt;button ion-button (click)="goToPayment()"&gt;pay&lt;/button&gt;
  </code></pre>
  
  <p>but I always get this error message:</p>
  
  <p><a href="https://i.stack.imgur.com/boCbw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/boCbw.png" alt="enter image description here"></a></p>
  
  <p>Any idea of what I'm doing wrong?</p>
  
  <hr>
  
  <blockquote>
    <p>here is my payment.module.ts:</p>
  </blockquote>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { ComponentsModule } from '../../../components/components.module';
  import { PaymentPage } from './payment';
  import { ProductsPage } from '../../products/products';
  
  @NgModule({
     declarations: [
         PaymentPage, ProductsPage  &lt;-- if I add here ProductsPage, then new error (see under)
     ],
     imports: [
          IonicPageModule.forChild(PaymentPage),
          ComponentsModule
     ]
  })
  export class PaymentPageModule {}
  </code></pre>
  
  <blockquote>
    <p>and products.module.ts :</p>
  </blockquote>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { ProductsPage } from './products';
  import { ComponentsModule } from '../../components/components.module';
  
  @NgModule({
     declarations: [
        ProductsPage
     ],
     imports: [
        IonicPageModule.forChild(ProductsPage),
        ComponentsModule
    ]
  })
  export class ProductsPageModule {}
  </code></pre>
  
  <p>and if I declare ProductsPage like above then I get this error message:</p>
  
  <p><a href="https://i.stack.imgur.com/8GT4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8GT4s.png" alt="enter image description here"></a></p>