Pessoal, boa noite.
Gostaria de confirmar se os raciocínios citados nos comentários estão corretos.
Observação: substitui o nome dos arrays, pois a palavra "photos" já havia sido usada em diversas partes do projeto e estava me deixando confuso quanto ao entendimento.
photo-list.component.html
<!--
1º. Este HTML chama o componente PhotosComponent através do seletor ap-photos.
2º. PhotosComponent possui o array photosOfPhotosComponent. Ele está sendo preenchido através do array photosOfPhotosListComponent do PhotoListComponent
via databinding (colchetes []). É como se PhotosListComponent fosse o component pai e PhotosComponent fosse o componente filho.
3º. PhotoListComponent tem seu array photosOfPhotosListComponent preenchido através de consulta e retorno de API feito através do serviço photoService.
-->
<ap-photos [photosOfPhotosComponent]="photosOfPhotosListComponent"></ap-photos>
photos.component.html
<!--
1º. O item da lista (li) tem a diretiva ngFor que itera o array photosOfPhotosComponent do seu respectivo componente, a saber, PhotosComponent.
2º. Em cada iteração neste array é chamado o componente PhotoComponent através do seletor ap-photo e suas Inbound Properties "description" e "url"
são preenchidas via databinding (colchetes []).
-->
<ol class="list-unstyled row">
<li *ngFor="let photo of photosOfPhotosComponent" class="col-4">
<ap-photo
[url]="photo.url"
[description]="photo.description">
</ap-photo>
</li>
</ol>
photo.component.html
<img class="img-thumbnail" [src]="url" [alt]="description">
photo.component.ts
import { Component, Input } from "@angular/core";
@Component({
selector: 'ap-photo',
templateUrl: 'photo.component.html'
})
export class PhotoComponent
{
@Input() description = '';
@Input() url = '';
//@Input() significa que as propriedades description e "url" estão recebendo os parâmetros dinamicamente, no caso, de photos.component.html.
}