melhor_exp_do_usuario - VWJavascript/Alurapic GitHub Wiki
Nossa aplicação está ganhando cada vez mais forma, mas ainda temos muito trabalho pela frente. Mas antes de avançarmos, que tal exibir cada foto dentro de um painel do bootstrap? A marcação deste painel não é muito trivial:
<!-- código não entra em nossa aplicação por enquanto, apenas ilustrativo -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Aqui vem o título do painel</h3>
</div>
<div class="panel-body">
<!-- conteúdo do painel aqui -->
</div>
</div>Se tornarmos essa marcação um componente, poderemos ter algo do tipo:
<!-- código não entra em nossa aplicação por enquanto, apenas ilustrativo -->
<painel titulo="Titulo do Meu Painel">
<!-- aqui vem o conteúdo do painel -->
</painel>Já sabemos fazer isso, inclusive é uma boa hora para lembrarmos do que aprendemos. Vamos criar um novo componente, o PainelComponent:
// alurapic/client/app/painel/painel.component.ts
import { Component, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'painel',
templateUrl: './painel.component.html'
})
export class PainelComponent {
@Input() titulo: string;
}E claro, seu template:
<!-- alurapic/client/app/painel/painel.component.html -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">{{titulo}}</h3>
</div>
<div class="panel-body">
</div>
</div>Lembre-se que é uma boa prática criarmos um módulo para este componente. Vamos criá-lo:
// alurapic/client/app/painel/painel.module.ts
import { NgModule } from '@angular/core';
import { PainelComponent } from './painel.component';
@NgModule({
declarations: [ PainelComponent ],
exports: [PainelComponent]
})
export class PainelModule { }Por fim, vamos importá-lo em AppModule:
// alurapic/client/app/app.module.ts
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import { PainelModule } from './painel/painel.module';
@NgModule({
imports: [ BrowserModule, FotoModule, HttpModule, PainelModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Falta mais alguma coisa? Sim, precisamos alterar alurapic/client/app/app.component.html para que faça uso do painel. Aliás, quando formos iterar na lista de fotos, criaremos um painel para cada foto. Sendo assim, a diretiva ngFor sai de e passa para :
<!-- alurapic/client/app/principal/components/principal.html -->
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}">
<foto titulo="{{foto.titulo}}" url="{{foto.url}}"></foto>
</painel>
</div>Ops! Ao testar, vemos que apenas o título do painel é preenchido e que todo seu conteúdo é removido.
Isso acontece porque não indicamos onde o componente Painel deve manter seu conteúdo. Fazemos isso adicionando o componente na marcação do template:
<!-- alurapic/client/app/painel/painel.component.html -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">{{titulo}}</h3>
</div>
<div class="panel-body">
<ng-content></ng-content>
</div>
</div>
Agora sim, nosso painel mantém seu conteúdo, exibindo todos os dados das fotos. Porém, podemos melhorar ainda mais o visual da página usando o sistema de grid do bootstrap:
<!-- app.component.html -->
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<div class="row">
<painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}" class="col-md-2">
<foto titulo="{{foto.titulo}}" url="{{foto.url}}">
</foto>
</painel>
</div><!-- fim row -->
</div>Recarregando nossa página, temos um visual muito mais interessante!
