I have a calendar component that has a data property marked as @Input():
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit, OnChanges {
@Input() data: CalendarDay[];
constructor() {
this.data = [];
}
ngOnInit() {
this.initializeDays();
}
ngOnChanges(changes: SimpleChanges) {
console.log(this.data);
console.log(changes.data);
}
}
I send the data to this component like this:
<app-calendar [data]="this.calendarData"></app-calendar>
The passed data is then rendered using *ngFor in the calendar component (it renders perfectly and everything works smoothly):
<div *ngFor="let item of data">{{item.date}}</div>
Before rendering the data into the view, I want to parse it. However, whenever I try to log the data property within the calendar component, I get a strange array that appears empty at first but can be inspected further in the browser console:
.
When I attempt to log values like this:
console.log(this.data[0])
or
console.log(changes.data.currentValue[0])
I receive an undefined value.