How to access object property in angular using string interpolation?

Question

I have this object in my component ts file that looks like this:

 someData = {
      someValue: null,
      unit: "centimeters"
    },

In my template (html file) I have to verify the value of "someValue" property. If its value is null then display the unit, else display the value of someValue and unit together. I have the below code but it doesn't seem to work. Can anyone point me in the right direction? Thanks in advance!

<div>{{ someData?.someValue === null ? someData?.someValue.unit : someData?.someValue someData?.unit }}</div >

Peter Haddad · Accepted Answer · 2021-06-15 21:03:00Z

2

You can use ngif to check the condition and show the data:

<div *ngIf="someData?.someValue === null">{{someData.unit}}</div>
<div *ngIf="someData?.someValue!= null">{{someData.someValue}} {{someData.unit}}</div>

answered Jun 15, 2021 at 21:03

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Dunkerley · Accepted Answer · 2021-06-15 21:03:02Z

Your two values at the end aren't going to render right, because it's executable javascript, not HTML when inside the double brackets.

I would suggest splitting this into two lines of HTML.

<div *ngIf="someData?.someValue; else unit_only">{{someData.someValue}} {{someData.unit}}</div>
<ng-template #unit_only>{{someData?.unit}}</ng-template>

Or you could try sticking with your original approach...

<div>{{ someData?.someValue === null ? someData?.unit : someData?.someValue + ' ' + someData?.unit }}</div>

Collectives™ on Stack Overflow

How to access object property in angular using string interpolation?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related