Um componente é a unidade de código que encapsula os dados, o comportamento e a apresentação, podendo coexistir com outros componentes sem bagunçá-los.

• Componentes podem ser combinados entre si para criar recursos mais complexos, no entanto fáceis de manter.

Em Angular, um componente nada mais é do que uma classe (ES6).

• Vamos criar a classe AppComponent no arquivo alurapic/client/app/app.component.ts.

  // alurapic/client/app/app.component.ts
  
  class AppComponent {}

Nossa classe não parece ter cara de componente, certo?

• Um componente precisa ter um template que guarde sua apresentação, incluindo um seletor que é uma maneira de referenciá-lo no template de outros componentes.

Para tornarmos AppComponent um componente de verdade precisamos lançar mão do decorator Component.

• Linguagens como Python possuem decorators, mas infelizmente o JavaScript, mesmo em sua versão 2015 (ES6) ainda não possui esse recurso.
• Então, como usaremos um decorator sem que a linguagem o suporte?
• A resposta é simples, não programaremos usando JavaScript, mas uma linguagem que possui todos os recursos dessa e outros recursos fantásticos, incluindo os decorators. Programaremos usando TypeScript.

O TypeScript é uma linguagem criada pela Microsoft e abraçada pela equipe do Angular.

• Não é à toa que criamos um arquivo com a extensão .ts.

Utilizaremos a sintaxe de importação do sistema de módulos do ES6, para importarmos o decorator Component que está no pacote @angular/core:

// alurapic/client/app/app.component.ts

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

class AppComponent {}

Agora que importamos, vamos adicionar o decorator na definição da classe:

// alurapic/client/app/app.component.ts

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

@Component
class AppComponent {}

Nosso decorator precisa receber duas configurações, no mínimo.

• A primeira é o apelido com qual esse componente será chamado no template de outros componentes, e o segundo é o local do seu template, isto é, do arquivo HTML que define a marcação:

  // alurapic/client/app/app.component.ts
  
  import {Component} from '@angular/core';
  
  @Component({
    selector: 'app',
    templateUrl: './app/app.component.html'
  })
  class AppComponent {}

Dessa forma, quando usarmos nosso componente em nossa páginas, eles ficarão como , ou seja, o nome do seu seletor.

• Veja que também já indicamos através de templateUrl o caminho do template utilizado pelo componente, ou seja, o código HTML que será utilizado.

• O arquivo ainda não existe, vamos criá-lo:

  <!-- alurapic/client/app/app.component.html -->
  
  <div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
  </div>
  <div class="container">
    <img class="img-responsive center-block" src="img/leao.jpg" alt="leão">
  </div>