[Fixed] Is there a way for html page to loads after retrieving data from ionic storage?


I got an error ERROR TypeError: Cannot read property 'name' of undefined

I have a service that retrieves data from the storage and a homepage that calls the service and displays the data.


async initilizeData() {
   this.data = await this.storage.get('myData')
getData() : MyData {
   return this.data


data: MyData

async ngOnInit() {
   this.data = this.storageService.getData()



The console.log() inside ngOnInit() does log out the data for me but in the HTML page
both data.name and data.amount seems to be undefined (I knew since when I put *ngIf="!data == null" around the code, the error disappeared.)

Thank you for all the answers 🙂


One way to do that would be to wrap the data using an ngIf, like this:

<ng-container *ngIf="data">
  <ion-text>{{ data.name }}</ion-text>
  <ion-text>{{ data.amount }}</ion-text>

The content won’t be displayed until data is initialized.

Another way to avoid this would be by using the safe navigation operator, like this:

<ion-text>{{ data?.name }}</ion-text>
<ion-text>{{ data?.amount }}</ion-text>

In this case, Angular will not try to access data.name and data.amount if data is null or undefined. Please keep in mind that this approach will still render the ion-text elements, but they will be empty until data is initialized.

Leave a Reply

(*) Required, Your email will not be published