@input not receiving data

Ionic Framework ionic-v3
1

Child Code

import { Component, Input } from "@angular/core";
//import { Card, Item, List} from 'ionic-angular';

@Component({
  selector: 'product',
  templateUrl: 'product.component.html'
})
export class Product {
  @Input() productObject: any;
  product: any;

  constructor(){
    setTimeout( () => {
      console.log(this.productObject);
      this.product = this.productObject;
    }, 1000)
    
  }
}

The variable this.productObject is always undefined.

I am using it like this in the parent view,

<product [productObject]='product'></product>

Please note that it works perfect without the @Input. But it break as soon as I try to pass inputs to the component. Any help is highly appreciated.

2

Don’t use setTimeout as a crutch. 99% of the time there’s a much more reliable and idiomatic way to achieve your goal. In this case, that’s waiting until the property is set before accessing it. I’m not sure if there’s a specific Ionic lifecycle event that works for this purpose, but I know that ngOnChanges is reliable.

3

I have tried ngOnInit, that doesn’t work. I am now going to try by initializing a default value to the variable this.productObject. I will post back if it works.