I have calendar ponent with data property decorated as @Input():

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

@Component({
  selector: 'app-calendar',
  templateUrl: './calendarponent.html',
  styleUrls: ['./calendarponent.css']
})
export class CalendarComponent implements OnInit, OnChanges {
  @Input() data: CalendarDay[];

  constructor() {
    this.data = [];
  }

  ngOnInit() {
    this.initDays();
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.data);
    console.log(changes.data);
  }
}

I pass data in from another ponent like that:

<app-calendar [data]="this.calendarData"></app-calendar>

And passed data gets rendered by *ngFor in the calendar ponent (it renders perfectly and everything works just fine):

<div *ngFor="let item of data">{{item.date}}</div>

I want to parse this data first before rendering it into view and whenever i try to console.log data property within the calendar ponent i get strange array, its shows as empty, i can 'open' it from browser console:

.

And when i try to log value like that:

console.log(this.data[0])

or

console.log(changes.data.currentValue[0])

i get undefined value.

I have calendar ponent with data property decorated as @Input():

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

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.ponent.html',
  styleUrls: ['./calendar.ponent.css']
})
export class CalendarComponent implements OnInit, OnChanges {
  @Input() data: CalendarDay[];

  constructor() {
    this.data = [];
  }

  ngOnInit() {
    this.initDays();
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.data);
    console.log(changes.data);
  }
}

I pass data in from another ponent like that:

<app-calendar [data]="this.calendarData"></app-calendar>

And passed data gets rendered by *ngFor in the calendar ponent (it renders perfectly and everything works just fine):

<div *ngFor="let item of data">{{item.date}}</div>

I want to parse this data first before rendering it into view and whenever i try to console.log data property within the calendar ponent i get strange array, its shows as empty, i can 'open' it from browser console:

.

And when i try to log value like that:

console.log(this.data[0])

or

console.log(changes.data.currentValue[0])

i get undefined value.

• javascript
• angular
• typescript
• angular7

• 2 Have you tried removing the initialisation from the constructor? That doesn't need to be there. You should avoid putting anything other than dependency injection in the constructor. – Will Alexander Commented May 29, 2019 at 19:28
• Please try to create an minimal reproducible example, I remend stackblitz. – Igor Commented May 29, 2019 at 19:30

1 Answer 1

Delete this.data = [] from constructor, avoid change anything when you use dependecy injecton.

And use set and get for each Input() that you want to use in your template, it's a best practice.

  private _data: CalendarDay[];

  @Input() set data(data: CalendarDay[]) {
    if(data) {
     this._data = data;
    }
  }

  get data(): CalendarDay[] {
    return this._data;
  }

And in your HTML you should pass it with:

<app-calendar [data]="calendarData"></app-calendar>

In calendar ponent you can use with

<div *ngFor="let item of data">{{item.date}}</div>