ngIf="!photos.length" não está funcionando

Olá! Estou tentando implementar a frase "Sorry, no photos" caso o array photos não possua nenhum elemento, porém, apesar do filtro estar funcionando, a mensagem não é exibida quando nenhuma foto é encontrada.

photo-list.component.html :

<div class="text-center mt-3 mb-3">
    <form>
        <input
            class="rounded"
            type="search"
            placeholder="search..."
            autofocus
            (keyup)="filter = $event.target.value">
    </form>
</div>

<p class="text-center text-muted" *ngIf="!photos.length">
    Sorry, no photos
</p>

<ap-photos 
    [photos]="photos | filterByDescription: filter">
</ap-photos>

photo.component.ts:

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Photo } from '../../photo/photo';

@Component({
  selector: 'ap-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnChanges {

  @Input() photos: Photo[] = []
  row: any[] = [];

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    if(changes.photos){
      this.row = this.groupColumns(this.photos);
    }
  }

  groupColumns(photos: Photo[]) {
    const newRows = []

    for(let index = 0; index < photos.length; index+=3){
      newRows.push(photos.slice(index, index+3));
    }
    return newRows;
  }

}

photo-list.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { PhotoService } from '../photo/photo.service'
import { ActivatedRoute } from '@angular/router';
import { Photo } from '../photo/photo';

@Component({
  selector: 'ap-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos: Photo[] = [];
  filter:string = '';

  constructor(
    private photoService: PhotoService, 
    private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {

    const userName = this.activatedRoute.snapshot.params.userName;
    this.photoService
      .listFromUser(userName)
      .subscribe(photos => this.photos = photos);
  }
}

filter-by-description.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
import { Photo } from '../photo/photo';

@Pipe({
  name: 'filterByDescription'
})
export class FilterByDescriptionPipe implements PipeTransform {

  transform(photos: Photo[], descriptionQuery: string) {
    descriptionQuery = descriptionQuery.trim().toLowerCase();

    if(descriptionQuery){
      return photos.filter(photo => 
          photo.description.toLowerCase().includes(descriptionQuery)
        );

    } else {
      return photos;
    }

  }

}