Angular 4 @Input() value is undefined in ngOnInit()

Question

month-detail.component.html

import ...
@Component({
  template: `{{month?.id}} <app-month-date [month]="month"></app-month-date>`
})
export class MonthDetailComponent implements OnInit {
  month: Month;
  ngOnInit(): void {
    this.route.params
      .switchMap((params: Params) => this.monthService.getMonth(+params["id"]))
      .subscribe(month => (this.month = month));
  }
}

month-date.component.html

<p>month-date works! {{month?.id}}</p>

month-date.component.ts

import { Component, OnInit, Input } from "@angular/core";
import { Month } from "app/attendance/month";

@Component({
  selector: "app-month-date",
  ...
})
export class MonthDateComponent implements OnInit {
  @Input() month: Month;
  ngOnInit() {
    //undefined --- here
    console.log(this.month);
  }}

month?.id shows correctly in month-detail.component.html, but month is undefined with tag app-month-date in month-date.component.ts. Maybe not get the value on ngOnInit?

Yup it's undefined cause the ngOnInit will tigger before the month is set. In this case you want tot use ngOnChanges — Swoox
– Swoox, Commented Nov 28, 2017 at 14:44
If you really think about why you have month?.id instead of month.id, the answer will become apparent. — Kirk Larkin
– Kirk Larkin, Commented Nov 28, 2017 at 14:45

Plog · Accepted Answer · 2017-11-28 14:44:43Z

6

You can resolve this by ensuring the child component is not initialised before the month input value is sent to it by including an *ngIf in your parent template:

@Component({
  template: `{{month?.id}} <app-month-date *ngIf="month" [month]="month"></app-month-date>`
})

answered Nov 28, 2017 at 14:44

Plog

9,6625 gold badges45 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

Angular 4 @Input() value is undefined in ngOnInit()

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related