How to show/hide element depending on if the value is not undefined on angular2?

Question

I have this code to only show the weekly hour if the value is not undefined. However, this ngIf check still show undefined on the element. I already tried *ngIf="item.weeklyHour !== undefined" as well but the undefined still shows up. What am I missing?

<span class="c-f__weekly-hour" *ngIf="item.weeklyHour">
    {{item.weeklyHour}}
</span>

I guess item.weeklyHour is not undefined but "undefined" (You (accidententaly ?) converted it to string somewhere). That would explain this behavior... — n00dl3
– n00dl3, Commented Jul 26, 2017 at 7:38
use <span class="c-f__weekly-hour" *ngIf="item && item.weeklyHour"> — Santosh Shinde
– Santosh Shinde, Commented Jul 26, 2017 at 7:44
Your question is confusing: "show the weekly hour if the value is not undefined" and " the undefined still shows up" — Vega
– Vega, Commented Jul 26, 2017 at 7:48

Vivek Doshi · Accepted Answer · 2017-07-26 07:57:28Z

2

Use ? operator

<span class="c-f__weekly-hour" *ngIf="item?.weeklyHour">

Here is the PLunker ,

please open the app.ts file and review the output by commenting and uncommenting the item object.

edited Jul 26, 2017 at 7:57

answered Jul 26, 2017 at 7:37

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

3 Comments

eko Over a year ago

Have you tried this? AFAIR safe-nav operator doesn't work with ngIf.

Vivek Doshi Over a year ago

will you please post the item json object?

Vignesh Over a year ago

Use this <span class="c-f__weekly-hour" [hidden]="!item?.weeklyHour">

iv444 · Accepted Answer · 2017-07-26 08:19:42Z

1

I found the answer! It's combination of @Vivek & @n00dl3! The json contains not only the value but also a string so the value was undefined blabla. So I updated the json and also use the *ngIf="item?.weeklyHour".

answered Jul 26, 2017 at 8:19

iv444

1,0052 gold badges11 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to show/hide element depending on if the value is not undefined on angular2?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related