Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Pausa para esclarecimento de dúvidas conceituais

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.
}
3 respostas

Fala ai Daniel, tudo bem? Todos os seus comentários estão corretos, é isso ai mesmo, parabéns.

Apenas complementaria sobre o @Input, ao definir propriedades com o mesmo, estamos dizendo que elas serão passadas por quem utilizar nosso componente.

Ou seja, o componente pai que em seu template usar o componente com @Input pode popular os dados das propriedades via atributos.

Espero ter ajudado.

Opa, beleza Matheus?

Entendi, só pra finalizar, o que você diz então é que qualquer componente que utiliza o PhotoComponent pode setar valores para as propriedades com @Input(), correto?

solução!

Fala Daniel, vamos lá:

Entendi, só pra finalizar, o que você diz então é que qualquer componente que utiliza o PhotoComponent pode setar valores para as propriedades com @Input(), correto?

Exatamente, isso mesmo.

Espero ter ajudado.