Nossa aplicação possui apenas o componente AppComponent, que renderiza a página principal da nossa aplicação. Que tal criarmos mais um? Mas qual, nessa fase inicial do projeto?

Veja que usamos a tag no template de AppComponent, com classes do bootstrap voltadas para criação de uma imagem responsiva, aquela que se adapta ao espaço disponível na tela. Você lembra quais foram as classes? Se por acaso você não sabe ou não lembra, não se preocupe.

Podemos criar um componente chamado FotoComponent, que isolará a complexidade de uma imagem responsiva, sendo assim, toda vez que precisarmos deste tipo de imagem, basta utilizarmos o componente que esconderá seus detalhes de criação.

Primeiro, vamos criar o nosso componente foto no arquivo alurapic/client/app/foto/foto.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'foto',
    templateUrl: './app/foto/foto.component.html'
})
export class FotoComponent {}

E o template do componente:

<!-- alurapic/client/app/foto/foto.component.html -->
<img class="img-responsive center-block" src="img/leao.jpg" alt="Leão">

Por enquanto, temos apenas um componente que diz respeito à apresentação de uma foto. Mais tarde, utilizaremos outros artefatos do Angular, como pipes e services. Sendo assim, precisamos criar um módulo que chamaremos de FotoModule, que por enquanto conterá o componente FotoComponent:

import { NgModule }      from '@angular/core';
import { FotoComponent }   from './foto.component';

@NgModule({
  declarations: [ FotoComponent ],
  exports: [FotoComponent]
})
export class FotoModule { }

Veja que, diferentemente do módulo principal da aplicação, não precisamos definir a propriedade bootstrap. Além disso, veja que o componente listado em declarations também foi atribuído à propriedade exports. Isso é importante, pois quem importar o módulo só terá acesso aos artefatos do módulo que forem explicitados em exports.

Agora precisamos importar o módulo que acabamos que criar em AppModule:

// alurapic/client/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FotoModule } from './foto/foto.module';

@NgModule({
  imports:      [ BrowserModule, FotoModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Por fim, vamos usar o componente FotoComponent no template de AppComponent. Lembre-se que no template usamos o nome definido no seletor do componente, sendo assim, usaremos FotoComponent como foto:

<!-- alurapic/client/app/app.component.html -->

<h1 class="text-center">Alurapic</h1>
<foto></foto>

Lembre-se que o compilador do TypeScript e o nosso servidor devem estar rodando, para podermos realizar um teste acessando o endereço localhost:3000.

Perfeito, nosso componente de foto é exibido. E se quisermos exibir outra foto? Que tal adicionar mais uma vez ?

<!-- alurapic/client/app/app.component.html -->

<h1 class="text-center">Alurapic</h1>
<foto></foto>
<foto></foto>

Recarregando nossa página, como era esperado, duas imagens são exibidas: