why my data passed by binding stay undefined?

Question

I have a set of data in JSON and I tried to pass them one by one in a ngfor, to display the data in another component but when I do so I have an error X is undefined. first component

import { Component, OnInit } from '@angular/core';

const data= [{
  "_id": {
    "$oid": "5ef3493e7322c93b9cc6fdf7"
  },
  "name": "TP python 1",
  "coefTP": 0,
  "date": {
    "$date": "2020-01-23T00:00:00.441Z"
  }
},{
  "_id": {
    "$oid": "5ef354dd7322c93b9cc6fdfa"
  },
  "name": "TP python 2",
  "coefTP": 1,
  "date": {
    "$date": "2020-01-23T00:00:00.441Z"
  }
}];

@Component({
  selector: 'app-my-tps',
  templateUrl: './my-tps.component.html',
  styleUrls: ['./my-tps.component.css']
})
export class MyTPsComponent implements OnInit {
  tpList : any[] = data;
  constructor() { }

  ngOnInit(): void {

  }

}

<h1 class="text-center display-1">My TPs</h1>
<hr class="w-25">
<div class="bg-light ml-5">
    <div class="container">
      <div class="row">
        <app-tp-item *ngFor="let tp of tpList" [sendtp]="tp" class="col-md-6 col-lg-3 col-xs-8">
        </app-tp-item>
      </div>
    </div>
  </div>

second component

import { Component, OnInit, Input } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Component({
  selector: 'app-tp-item',
  templateUrl: './tp-item.component.html',
  styleUrls: ['./tp-item.component.css']
})
export class TpItemComponent implements OnInit {

  @Input() sendtp: JSON;
  public readonly nom:string;
  public readonly date:string;
  public readonly coeff:number;
  public readonly id:string;

  constructor() {
    this.nom=this.sendtp['name'];
    this.date=this.sendtp['date'];
    this.coeff=this.sendtp['coefTP'];
    this.id=this.sendtp['_id'];
  }
}

the html part only shows:
    this.nom;
    this.date;
    this.coeff;
    this.id=this;

the error says that in the second component

@Input() sendtp: JSON; //<-- this is undefined

I'd like to know why it stay undefined, could you help me ?

Answer 1

Constructor works when instance of a component is created (like other programming languages).

ngOnInit works when the data of component has been bound.

Moreover, you are trying to reach them on constructor, so it must be undefined because the data (or props) are not bound yet.

To solve the issue you need to reach them at ngOnInit lifecycle

export class TpItemComponent implements OnInit {

  @Input() sendtp: JSON;
  public nom:string;
  public date:string;
  public coeff:number;
  public id:string;

  ngOnInit() {
    this.nom=this.sendtp['name'];
    this.date=this.sendtp['date'];
    this.coeff=this.sendtp['coefTP'];
    this.id=this.sendtp['_id'];
  }
}

Check this out for more information about Angular Lifecycle