Using ngOnInit() instead of a constructor; @Input() undefined

Question

First of all if this is horrible design, I'm more than happy to change.

In my index.html I, in the body, have:

<month [year]="2016" [monthOfYear]="4">Loading...</month>

month.component.ts is then:

import { Component, Input, OnInit } from '@angular/core';
import { DayComponent } from '../day/day.component';
import * as Models from '../../../models/_models';

@Component({  
  selector: 'month',
  moduleId: module.id,
  templateUrl: 'month.component.html',
  styleUrls: ['month.component.css'],
  directives: [DayComponent]
})

export class MonthComponent {  
  name: string;
  days: Models.Day[];
  @Input('year') year: number;
  @Input('monthOfYear') monthOfYear: number;
  month: Models.Month;

  ngOnInit() {
    this.month = new Models.Month(this.year, this.monthOfYear);
    this.name = this.month.getMonthName();
    this.days = this.month.days;
  }
}

...And ngOnInit() is called correctly. However at the time of calling (or perhaps ever, but I don't know how to determine that) both year and monthOfYear are undefined.

How do I ensure the values are passed in at ngOnInit(), or is there a better pattern to accomplish this?

trey-jones · Answer 1 · 2016-08-11T12:37:06.833

5

So this is actually quite simple, but not clear from the tutorial/docs.

Here is the solution:

<month year="2016" monthOfYear="4">Loading...</month>

The square brackets around attributes signify that the component should treat those as data bindings to the parent component. So if you wanted to pass those values from the parent, you would do the following:

<month [year]="year" [monthOfYear]="month">Loading...</month>

In your case you are assigning string literals, and so the square brackets aren't needed. Also, you should declare that your component implements OnInit, but that doesn't seem to have any bearing on the execution.

edited Aug 11 '16 at 12:37

answered May 25 '16 at 00:01

trey-jones

3,329
1
27
35

2

You could also add `Loading...` that some prefer over `Loading...` wher Angular2 "magically" loads attribute values to properties. – Günter Zöchbauer May 25 '16 at 05:11

score 2 · Answer 2 · answered May 25 '16 at 03:51

If I understand right, you try to pass some values from index.html to a Component (which in this case becomes the root component ). I am not sure this can work since Angular gets bootstrapped by the root component and can not serve index.html (which is the page that hosts Angular).

Normally in index.html you have a root (let's say AppComponent). AppComponent contains your components (eg MonthComponent). AppComponent CAN pass values to MonthComponent.

I hope this helps

See also http://stackoverflow.com/questions/36262560/input-is-undefined-on-ngoninit-angular-2/36262584#36262584 — Günter Zöchbauer, May 25 '16 at 05:15

Using ngOnInit() instead of a constructor; @Input() undefined

2 Answers2