How to pass data to ionic custom child component from page

Question

I am trying to pass a variable from a page to my custom child component and log as 'undefined'. I want this value in child component so that I can call another service onloading child component. please help.

child.component.ts

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


@Component({
  selector: 'well-subsurface',
  templateUrl: 'well-subsurface.html'
})
export class WellSubsurfaceComponent {

  @Input() data;
  wID: string;

  constructor(
    public navParams: NavParams) {


  }

  async ngOnInit() {

    this.wID = this.data;
    console.log("------ "+ this.wID)

  }

}

parent.component.ts

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


@IonicPage()
@Component({
  selector: 'page-asset',
  templateUrl: 'asset.html',
})
export class AssetPage {
 public wID: any;


  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public alertCtrl: AlertController
  ) {
  }

  MenuContorl(assetID) {
  this.wID = wID;
  }
}

parent.html

<well-subsurface></well-subsurface>

Hyuck Kang · Accepted Answer · 2018-06-18 16:04:27Z

2

Assume that you properly input the data like <well-subsurface [data]="wID"></well-subsurface>, then you should not use ngOnInit but use ngAfterContentInit.

As this angular lifecycle-hooks documentation says, ngOnInit does not guarantee that input data is ready via @Input, whereasngAfterContentInit does.

answered Jun 18, 2018 at 16:04

Hyuck Kang

1,8192 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data to ionic custom child component from page

}

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

}

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related