My Angular *ngif-condition doesn't work. It look okay, I cant find any error

Question

If the myFavorites.length is 0, I want it shows the following message:

"There are no added movies in the Favorites."

Otherwise, the main content (movieList) will be shown.

<div class="movie_container">
  <ng-template *ngIf="myFavorites.length === 0; else moviesList">
    <p>There are no added movies in the favorites list.</p>
  </ng-template>
  <ng-template #moviesList>
    <div *ngFor="let movie of myFavorites" class="movie_container">
      <img
        class="poster"
        [src]="'https://image.tmdb.org/t/p/w1280/' + movie.backdrop_path"
        [alt]="movie.title"
      />
      <h3>{{ movie.title }}</h3>
      <button (click)="removeFromFavorites(movie.id)">Remove</button>
    </div>
  </ng-template>
</div>

Answer 1

This

  <ng-template *ngIf="myFavorites.length === 0; else moviesList">

should be another tag, not ng-template. Try a plain old div for starters, ng-container will also do.

(BTW, the actual moviesList - it's a list, therefore we have better semantic HTML for that: either ul or ol, with every movie a li).