Vfrdtyky

I'm binding an input tag's value to an ngmodel.

<input type="text" id="Fname" value="{{getProfile.firstname}}" placeholder="FirstName" #FirstName/>

Here is my typescript component

export class EditprofileComponent implements OnInit {



  getProfile: Profile;



  constructor(private profileService: ProfileService)



  ngOnInit() {

    this.profileService.getProfile().subscribe(data =>{

      this.getProfile = data;

      console.log(data);

    })

  }

When I use console.log(data). The console writes out an object of type Profile. So I'm getting the correct data.

I've done this same exact thing with the ngFor directive. But it's not working for a regular input value.

How do I bind the Profiles first name as the value for the input tag?

It's asynchronous, so you need to add ensure that the data is loaded in the template before the component renders. There are a few options to fix this:

Simple solution

Add the existential operator/safe navigation operator ? (to check if your variable exists):

getProfile?.firstname

Or

Wrap your input in an ng-container with *ngIf.

<ng-container *ngIf="getProfile">

// Add your input here

</ng-container>

Best/Better practice

Use a resolver to ensure the data is loaded before the component is rendered.

https://alligator.io/angular/route-resolvers/

change the syntax to -

value="{{getProfile?.firstname}}"

You can use the async pipe for observables (it will also unsubscribe when component is destroyed so you won't havo to do it manually) it will look like this:

getProfile: Observable<Profile>;



ngOnInit() {

  this.getProfile=this.profileService.getProfile();

}

html:

<input *ngIf="getProfile | async as profile" type="text" id="Fname" value="{{profile.firstname}}" placeholder="FirstName" #FirstName/>