I am currently using
Angular 5.2
Firestore
When using *ngIf isContent else noContent, my goal is to only render an Observable if it contains data. However, I am facing an issue where the logic always renders isContent even when there is no data present. Despite reviewing several similar questions on Stack Overflow, I cannot seem to identify what I am doing wrong. Can you please help me troubleshoot this?
Below is the code snippet causing the problem:
<ng-container *ngIf="months2025 | async as months; else nocontent">
#### RENDERING REGARDLESS OF MONTHS2025 ####
<div class="column">
<h1>2025</h1> #### <-- THIS SHOWS UP ####
<ul>
<li *ngFor="let month of months">
<a href={{month.url}}> {{ month.fileName }} </a>
</li>
</ul>
</div>
</ng-container>
#### NOT RENDERING WHEN NOCONTENT ####
<ng-template #nocontent>
</ng-template>
Here is the corresponding component.ts:
export class MinutesComponent {
monthsArray2025: AngularFirestoreCollection<any>;
months2025: Observable<any[]>;
constructor(private afs: AngularFirestore) {
this.monthsArray2025 = afs.collection<any>('minutes', ref => ref.where('year', '==', 2025);
this.months2025 = this.monthsArray2025.valueChanges();
}
}