Angular 2 - Can we bind JSON object directly from typescript file to html input value?

Question

I have the following code in my .ts file.

yourInfoData: IYourInfoData; //IYourInfoData is my constructor

getYourInfoData() {
  $this = this;
  $this.yourInfoData = yourInfoDataResponse; //yourInfoDataResponseis my response from service.
}

yourInfoDataResponsestructure is as follows:

yourInfoDataResponse{
  "firstName" : "Xyz",
  "lastName" : "Abc"
}

Can I access this.yourInfoData directly to bind with html input value as below :

<input type="text" [(ngModel)]="yourInfoData.firstName">

Doing so, I am getting an error

Cannot find firstName of undefined.

Can someone point to me what am I missing here. Or, is there other way to achieve this.

Answer 1

If you get the JSON from a service it's probably async and arrives with a delay

When Angular tries to resolve the template bindings while the data is not available it fails.

You can use the safe-navigation (Elvis) operator to avoid the error

<!-- doesn't work 
  <input type="text" [(ngModel)]="yourInfoData?.firstName">
-->

See this issue https://github.com/angular/angular/issues/7697

<input type="text" [ngModel]="yourInfoData?.firstName"
                   (ngModelChange)="yourInfoData.firstName=$event">

or if it can happen that the model changes before yourInfoData is set

<input type="text" [ngModel]="yourInfoData?.firstName"
                   (ngModelChange)="yourInfoData ? yourInfoData.firstName=$event : null">

this would also work

<input type="text" *ngIf="yourInfoData" [(ngModel)]="yourInfoData.firstName">

but it wouldn't display the input unless yourInfoData is set.