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

Ionic Framework ionic-v3
1

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';
@Component({
   ...
})
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?

2

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

3

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

4

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

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

@Component({
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:
Parent:
this.nav.push(ChildPage, { stringTest: this.stringTest });

Child:
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 = navParams.data[0];

1 Like
5

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

6

Hello!

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.

7

@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 = params.data; }

1 Like
8

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

9

Please let me know, if it worked