Can't check if array is initialized or empty with ngIf

Question

I have a property on my component for alert messages that may get populated:

alerts: ReportAlertMessage[];

I am trying to us ngIf to display an output if the array has any data.

I first tried:

<div class="row" *ngIf="alerts">

But it didn't work, it returns this error:

Cannot read property 'nativeElement' of undefined

So I tried:

<div class="row" *ngIf="typeof(alerts) !== 'undefined'">

and this gives me:

self.context.typeof is not a function

I want to check that it is initialized and has at least 1 value. What is the way to do this with ngIf?

edit:

full exception message. Problem seems to be ocurring because I am populating the array with an observable:

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'nativeElement' of undefined
Error: Error in :0:0 caused by: Cannot read property 'nativeElement' of undefined
    at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3561:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:30581:16)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:30646:16)
    at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:61302:16)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:83662:23)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83635:18)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:62229:20)
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:67737:42)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:25393:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:25360:26)
    at http://localhost:4200/vendor.bundle.js:25296:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:25296:29)
    at ActivateRoutes.activate (http://localhost:4200/vendor.bundle.js:25270:14)
    at http://localhost:4200/vendor.bundle.js:24830:22

I have also tried writing a static bool. It appears that this error occurs when I set the value of a property inside the callback from an observable

`Cannot read property 'nativeElement' of undefined` this error seems be related to something else.. Are you using `ElementRef` anywhere? — Suraj Rao, Mar 25 '17 at 04:04
Why don't you check length of array `*ngIf="alerts?.length > 0"`. The first condition will return false if it is not initalized. See [this](http://stackoverflow.com/questions/37543362/angular2-ngif-check-object-array-length-in-template) question — Nishant123, Mar 25 '17 at 04:08
@suraj I am using `ElementRef` in a different module. I have commented it out just to be safe but I still get this error. — Guerrilla, Mar 25 '17 at 04:10
@Nishant123 that generates same error. If I remove this if statement the app works perfectly. i am doing ngIf on some static bool properties and it works fine, maybe because this is a custom type? — Guerrilla, Mar 25 '17 at 04:12
@suraj the template is just the row and a test message. I have removed everything else. ngif works fine on static bool but not my array of custom type — Guerrilla, Mar 25 '17 at 04:17
@suraj `alert` appears to be a reserved name. I renamed it to `alertMessages` and now it works. — Guerrilla, Mar 25 '17 at 04:21
@suraj actually this did not fix. `*ngIf="!alertMessages"` works, but `*ngIf="alertMessages"` give the nativeElement error — Guerrilla, Mar 25 '17 at 04:50
you will need to put the template code.. full loop.. its not *ngIf syntax — Suraj Rao, Mar 25 '17 at 04:59
It seems issue is that I am setting property inside an observable. After observable sets property it becomes inacessible. — Guerrilla, Mar 25 '17 at 05:07
sry.. the entire block. also component code.. I dont have the full picture here to tell :) — Suraj Rao, Mar 25 '17 at 05:07

score 0 · Answer 1 · answered Mar 25 '17 at 04:05

0

Seems the first is the correct way to do it. It the alerts access modifier public

answered Mar 25 '17 at 04:05

Justus Ikara

172
9

2

public is not really necessary as long as they are class properties – Suraj Rao Mar 25 '17 at 04:06

score 0 · Answer 2 · answered Mar 25 '17 at 12:05

0

Try this

<div class="row" *ngIf="alerts.length">

answered Mar 25 '17 at 12:05

Krishan

2,356
6
36
47

score 0 · Accepted Answer · answered Mar 25 '17 at 12:31

0

Alternatively you can call a method in your component as

<div class="row" *ngIf="isEmpty(alerts)">

Component function

isEmpty(alerts){
    if(alerts===[]) {
         return true;
    } else {
         return false;
    }
}

answered Mar 25 '17 at 12:31

Aravind

40,391
16
91
110

Can't check if array is initialized or empty with ngIf

3 Answers3