@Input() property in angular component returns empty array

Question

I have calendar component with data property decorated 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.initDays();
  }

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

I pass data in from another component like that:

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

And passed data gets rendered by *ngFor in the calendar component (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 component i get strange array, its shows as empty, i can 'open' it from browser console:

Result of calling: console.log(changes.data.currentValue) .

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.

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
– Will Alexander, Commented May 29, 2019 at 19:28
Please try to create an minimal reproducible example, I recommend stackblitz.com — Igor
– Igor, Commented May 29, 2019 at 19:30

Shifenis · Accepted Answer · 2019-05-29 19:52:01Z

6

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 component you can use with

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

answered May 29, 2019 at 19:52

Shifenis

1,12512 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

@Input() property in angular component returns empty array

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