How to properly interpolate a nested property getter in angualr template?

Question

I'm trying to interpolate an nested property getter into angular html template:

<div class="row">
  <div class="col-xs-12">
    {{ myObject.myProps.someProperty1 }} -- Not working
  </div>
  <div class="col-xs-12">
    {{ myObject.someProperty2 }} -- Working
  </div>
</div>

The myObject.myextendedProps is a property getter Object typed, but I'm getting an Exception:

Cannot read property 'someProperty1' of undefined

But I know for sure that myProps is not null because when I'm console-logging the myObject, I can click on the Invoke property getter three dots of the myProps property it shows a real value.

My best guess that its a property getter issue. any suggestion solving it?

Answer 1

can use Elvis operator. The Elvis operator allows you to check for the existence an object before attempting to access its properties in your interpolations

Example {{ myObject?.myProps?.someProperty1 }}

Answer 2

You may or may not get the error depending on when you are initializing your data.

If you initialize the data i.e. myObject before the view is initialized then you will not get the error. And it has nothing to do with getter.

so, to stay safe when the view is initialized you can use safe navigation operator ( ? ) like this.

<div class="row">
  <div class="col-xs-12">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

Or, you can use *ngIf directive to make sure that you only access properties of myObject when myObject defined.

<div class="row" *ngIf="myObject">
  <div class="col-xs-12" *ngIf="myObject.myProps">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

I have created one simple stackblitz demo to understand it better. And you can also read more about Angular component lifecycle here https://angular.io/guide/lifecycle-hooks.