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?

Then that's a great case to try it `{{ myObject.myProps?.someProperty1 }}` — yurzui, Jun 26 '19 at 03:50
@yurzui, but eventually I'm still want to display the `someProperty1`, this does not resolve my issue — Shahar Shokrani, Jun 26 '19 at 04:24
I looks like it does exist in the chrome console when I click invoke property getter — Shahar Shokrani, Jun 26 '19 at 04:27

score 2 · Accepted Answer · answered Jun 26 '19 at 03:59

2

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 }}

answered Jun 26 '19 at 03:59

Jitendra

286
1
2
7

Hey @Jitendra, this does not resolve my issue. Eventually I'm still want to display the `someProperty1`, – Shahar Shokrani Jun 26 '19 at 04:28
hey @ShaharShokrani you can also use elvis operator for inner someProperty1 object. like {{ myObject?.myProps?.someProperty1?.innerProp?.innerProp2 }} – Jitendra Jun 26 '19 at 05:12
Elvis operator check if object is available if not available then print blank otherwise display value. It will not display error if object is not found – Jitendra Jun 26 '19 at 05:13

score 1 · Answer 2 · answered Jun 26 '19 at 07:03

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.

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

2 Answers2