Angular: como funciona um componente?

Segundo a documentação do Angular, o componente é o principal bloco de construção para aplicativos, e é composto por um template, um estilo e uma classe. É no template que encontraremos toda a estrutura HTML, a árvore DOM do componente. Já o estilo é onde será feita a estilização, e a classe onde é definido o comportamento e a lógica feita em Typescript.

Para configurar um componente, no arquivo TS é passado o decorador @Component, importado da lib ‘@angular/core’. Esse decorador é um método que recebe um objeto com os metadados como parâmetro. É criado um seletor, que será usado como tag HTML em outro template, o template passando o caminho do arquivo HTML, mas pode ser passado inline, e o arquivo de folha de estilo ou, assim como o template, passado inline.

Também temos a classe onde adicionamos propriedades e comportamentos ao componente.

Para ficar mais claro, crie uma nova aplicação com o Angular CLI, ng new sobre-componente. Não precisa de App Routing e o estilo fica à sua escolha. Com o projeto criado, serão gerados vários arquivos, dentre eles uma pasta chamada app. Nesta pasta estão os arquivos do AppComponent, principal componente da aplicação. É por meio do seletor deste componente que é passado para o index.html que toda aplicação vai poder ser vista pelo usuário.

Com auxílio do Angular CLI, crie um novo componente usando o comando ng generate component botao ou usando abreviação ng g c botao, e veja o que acontece. Abaixo podemos ver o que o comando realizou. Os arquivos HTML, CSS e Typescript gerados e uma modificação no AppModule, no caso a declaração do novo componente.

Após ser criado, o arquivo TS do BotaoComponent é bem parecido com a do AppComponent.

Todo componente precisa ser declarado em um módulo para poder ser utilizado na aplicação.

Para utilizar o componente botão que você criou, use o seletor 'app-botao', e insira no template do AppComponent.

E com um pouco de estilização o resultado é esse:

E esse componente pode ser reutilizado várias vezes.

Quando criamos um componente, o objetivo é fazer com que ele possa ser reutilizado em outras partes do código, para isso é necessário deixar esse botão o mais flexível possível. Para isso, vamos usar o decorator @Input(), que permite a entrada de dados do componente pai.

Agora no componente pai, no caso o AppComponent, vamos criar objetos contendo um título para o botão e um estilo.

Com as propriedades prontas, vamos até o template onde criamos os botões e criar um atributo property binding onde o btnConfigs vai receber o objeto que criamos no AppComponent.

Com as configurações chegando no BotaoComponent, podemos usá-las na estrutura do botão, colocando o estilo e o título. No HTML, vamos usar o property binding no ngStyle para receber o valor da propriedade que recebemos pelo @Input() e fazer uma interpolação para o título. E já vamos criar um evento de click para chamar o método alert.

O evento alert vai mostrar uma mensagem com o título do botão.

E esse será o resultado.

Conclusão

O componente é uma das partes mais importantes de uma aplicação Angular, eles são os elementos que possibilitam criar funcionalidades da view. Conhecemos como criá-los e como são estruturados. Vimos também como utilizá-los, deixando a responsabilidade de estilização e título para o componente pai, e como adicionar um evento simples. Espero que a partir daqui você consiga explorar cada vez mais o universo Angular.

Quer utilizar esse código para explorar o que aprendeu? Clica aqui para baixar o projeto e mergulhar ainda mais no mundo do Angular!