How to Show Placeholder if *ngFor Let Object of Objects from HTML Binding returns an empty array

Question

I display data from a template that I create in another component (team-announcements.component)... in the main team.component.ts I use the selector for team-announcements, and add the [announcement]="announcements" and ngFor="let announcement of announcements" to load the data. If the array returns no data IE there are no announcements, how can I display a placeholder like "No Announcements"?

This is where I load the announcements in team.component.html. The data is served through an API service and is retrieved in "team.component.ts", the HTML for the objects in question is below.

team.component.ts (get announcement functions):

  getAnnouncements() {
    this.teamsService.getTeamAnnouncements(this.team.slug)
      .subscribe(announcements => this.announcements = announcements);
      console.log("announcements", this.announcements);
  }

team.component.html

<div class="team-announcement">
     <div class="announcement-title">Message of the Day</div>
     <app-team-announcements
        [announcement]="announcement"
         *ngFor="let announcement of announcements">
      </app-team-announcements>
   </div>

This is how "app-team-announcements" above is templated in a separate file, "team-announcement.component.html" and is exported, and then used in the above code...

team-announcements.component.ts

import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';

import { Team, Announcement, User, UserService } from '../core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-team-announcements',
  templateUrl: './team-announcement.component.html'
})
export class TeamAnnouncementComponent implements OnInit, OnDestroy {
  constructor(
    private userService: UserService
  ) {}

  private subscription: Subscription;

  @Input() announcement: Announcement;
  @Output() deleteAnnouncement = new EventEmitter<boolean>();

  canModify: boolean;

  ngOnInit() {
    // Load the current user's data
    this.subscription = this.userService.currentUser.subscribe(
        (userData: User) => {
          this.canModify = (userData.username === this.announcement.author.username);
        }
      );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

team-announcements.component.html

<div class="announcement-text">
    {{announcement.body}}
</div>

I am unsure of how or where to "If" check the array length to display a placeholder. Can anyone help?

Answer 1

If you want to hide it and display something else instead you can use the else property from *ngIf:

<div class="team-announcement">
  <div class="announcement-title">Message of the Day</div>
  <ng-container *ngIf="announcements.length != 0; else emptyArray">
    <app-team-announcements
      [announcement]="announcement"
      *ngFor="let announcement of announcements">
    </app-team-announcements>
  </ng-container>
</div>
<ng-template #emptyArray>No announcements...</ng-template>

When you want an element with *ngFor to depend on a condition (*ngIf), a good alternative is to nest the element with an *ngFor in a <ng-container> with an *ngIf. A good thing about <ng-container> is that it wont actually be part of the DOM but will obey the *ngIf.