As afirmações abaixo estão corretas?
1- No arquivo photo.component.html nós criamos a tag .
<img class="img-thumbnail" [src]="url" [alt]="description">2- No photo.componente.ts criamos uma classe Photo que por convenção deve ter o nome PhotoComponent. Essa classe define um objeto foto.
import { Component, Input } from "@angular/core";
@Component({
selector: 'ap-photo',
templateUrl: 'photo.component.html',
})
export class PhotoComponent {
@Input() description = '';
@Input() url = '';
}3- O arquivo app.component.ts é como se fosse o método main (?), mas o que não estou entendendo é por que o array photos não é do tipo PhotoComponent?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
photos = [
{
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg',
description: 'Leão'
},
{
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Lioness_Etosha_NP.jpg/500px-Lioness_Etosha_NP.jpg',
description: 'Leoa'
}
];
}4 -Esse array de photos não poderia ser algo como
photos: PhotoComponent = []5- Outra dúvida é: no arquivo photo.component.ts fizemos o data-binding e no app.componente.html também. Isso quer dizer que se não faço data-binding no primeiro ele vai ler a string "url", e no segundo vai ler "photo.url" (?), conforme abaixo:
//photo.component.html
<img class="img-thumbnail" [src]="url" [alt]="description">//app.component.ts
<ap-photo *ngFor="let photo of photos" [url]="photo.url" [description]="photo.description"></ap-photo>
