Angular 2+ access @Input Data.Property with [(ngModel)]

Question

I have a component declared like follows, it receives an Input data. I'm using Primeng calendar Component, the component it's created but I'm not getting access to the data to pass it to the template I'm receiving an error on [(ngModel)]="data.DateValue", it's like DataValue don't exist already when accessing it

What Am missing?

How to set an auxiliar value like ( myDateValue: Date ) of type Date after the input data is received?

Thanks in advance.

import { Component, Input} from '@angular/core';
import { DataType } from "../model/dataType";

@Component({
  selector: 'exempleComponent',
  template: '<p-calendar *ngIf="data"  [(ngModel)]="data.DateValue" dateFormat="dd.mm.yy"></p-calendar>'

})
export class ExempleComponent {

  @Input() data: DataType;

  constructor() { }


}

Parent Component:

import { Component, OnInit } from '@angular/core';
import { WebService } from './app.service';
import { MasterDataType } from "../model/masterDataType";

@Component({
    selector: 'my-app',
    template: '<div> <exempleComponent [data]="theData.DataType" ><exempleComponent/> </div>',
    providers: [WebService]

})
export class AppComponent implements OnInit {
    errorMessage: string;
    theData: MasterDataType;

    constructor(private dataService: WebService) {}

    ngOnInit() { this.getDataFromService(); }
    getDataFromService() {
        this.dataService.getData ()
            .subscribe(
            myData => this.theData = myData,
            error => this.errorMessage = <any>error);
    }    
}

I've added the parent component, I don't think it's the parent because I have others component that receives correctly the data like: value={{data?.Value}} on the template — CREM
– CREM, Commented Aug 13, 2017 at 21:12
It's there something particular with [(ngModel)]="data.DateValue" ? — CREM
– CREM, Commented Aug 13, 2017 at 22:28

Hung Vi · Accepted Answer · 2017-08-14 07:35:53Z

1

The problem is pointed out as it is. The data variable is undefined. You should read more about Lifecycle Hooks.

Although your child component (ExempleComponent) is loaded at ngAfterContentInit, but theData variable is still undefined at this period because your service call is not completed (or subscribed).

For example:

data: SomeType;
ngOnInit() {
  console.log('START ngOnInit');
  this.service.getData().subscribe(_data => {
    this.data = _data;
    console.log('data', this.data);
  });
  console.log('END ngOnInit');
}

The result of the above code is:

START ngOnInit

END ngOnInit

data Object

The solution is you must bind the data after it is loaded.

Solution 1:

Initialize theData.DataType. Give it a default value.

Solution 2:

[(ngModel)]="data?.DateValue". This is to check if data variable is available (not undefined or null).

Solution 3:

You should consider using a data resolver that helps to load data before loading component.

Solution 4:

Prevent loading child component before its input data is loaded

edited Aug 14, 2017 at 7:35

answered Aug 14, 2017 at 7:29

Hung Vi

4904 silver badges16 bronze badges

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

3 Comments

CREM Over a year ago

I ended up passing an @Input() dateValue: string; to the child and it worked. But I don't see the difference between passing object.property or property

Hung Vi Over a year ago

They are different from each other. It works well if you use @Input() dateValue: string. But, it does not work since you give it an input like @Input() data: any. The reason is: The template of child component Example Component is loaded before the input data is passed into it. So, the result is: data will be assigned as undefined. Then, you use [(ngModel)]="data.DataType". It will throw an exception because data variable is undefined

CREM Over a year ago

In fact, my problem was that I had a dynamic component factory that created all my components and I was calling .detectChanges() before setting the Input data to the component, some how worked like that but now setting data and after call detectChanges() solved all my problems. Anyway, the discussion here made me think about my code. Need to do some plunker to share my code.

Collectives™ on Stack Overflow

Angular 2+ access @Input Data.Property with [(ngModel)]

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related