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

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

Answer 1

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

Answer 2

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

Answer 3

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