Pass variable from parent to child with @Input() does not work


In app.components.ts I have:

import { Component } from '@angular/core';
import { ChildPage } from '../pages/child/child';
export class MyApp {
    public stringTest:string = 'default';
    constructor(platform: Platform) {
        this.stringTest = 'changed';


In child/child.ts I have:

import { Component, Input } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
export class ChildPage {
  @Input() stringTest:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) { }
  ionViewDidEnter() { alert(this.stringTest); }

But I always get “undefined” in the child.

Why isn’t stringTest passed correctly?


It should be accessible . Are you passing it from your view?


No, not in view. I don’t use this in views only in code. Is this the error?


If you want to use @Input, you can use it like this:

   selector: 'abc'
export class ChildComponent {
  @Input() stringTest:any;

template: '<abc [stringTest]="varInThisParent"'></abc>
export class ParentComponent {
    varInThisParent:string = 'default';

If you want to pass a string into another page you can use navParams:
this.nav.push(ChildPage, { stringTest: this.stringTest });

this.stringTest = this.params.get('stringTest');

If you want to pass a variable from app.component.ts, where you use the ion-nav element, you could try to use a provider for communication between MyApp and ChildPage or try root params like this:

<ion-nav [root]="ChildPage" [rootParams]="stringTest"></ion-nav>
and in your ChildPage I think this should work:
this.stringTest =[0];


If we want to pass the large amount of data then which approach is better @Input or navParams?



Do I need to put “stringTest” into the template? <abc [stringTest]=“varInThisParent”’>

I don’t need this and only modify the variable in the constructor.


@khokhardheeraj : navParams is a nice way to go, if you use navCtrl for navigation. @Input is good for passing data into a child component by including it in the parents template with its selector (e.g. <child-comp></child-comp>. I guess that navParams is better for large amount of data, but I am not sure.

@rebuhleiv : How do you navigate to your ChildPage? If you use it as root, use the following: <ion-nav [root]="ChildPage" [rootParams]="stringTest"></ion-nav> and also keep stringTest in the constructor of your app.component.ts like you wrote:
public stringTest:string = 'default'; constructor(platform: Platform) { this.stringTest = 'changed'; });
rootParams should be accessible via navParams. In your ChildPage include the following to access the string:
import { NavParams } from 'ionic-angular'; constructor(public params: NavParams) { this.stringTest =; }


@Nexi Thanks for the response. I will follow the same approach which you explained.


Please let me know, if it worked