07/06/2023, 14:45 Class Let's Code
#854 Top Coders | Web Full Stack Seg • Qua • Sex
arrow_back Framework Front-End I | Angular
Conteúdo
Conteúdo Exercícios
3 Componentes
Componentes
Primeiramente, é preciso destacar que componentes são importantes!
Os componentes são a funcionalidade chave do Angular. Ao invés de você criar sua aplicação
toda em um arquivo HTML e um arquivo JavaScript, o Angular permite que você crie a sua
aplicação toda separada em componentes.
Quando utilizamos a componentização no nosso código, podemos contar com inúmeras
vantagens, dentre as quais podemos citar: a reutilização de determinados trechos de código e a
maior facilidade para a manutenção do código.
O AppComponent que é gerado automaticamente ao criar uma aplicação Angular é o
componente root (componente raiz da aplicação), que guarda a aplicação inteira no final das
contas. É onde todos os componentes irão se juntar.
Por exemplo, imagine um website qualquer, o cabeçalho poderia ser um componente, a área
lateral poderia ser outro componente e o conteúdo principal do website outro componente.
Dentro dos componentes da lateral e do conteúdo principal poderiam haver ainda outros
componentes. Veja como poderíamos dividir uma aplicação em vários componentes:
[Link] 1/7
07/06/2023, 14:45 Class Let's Code
Imagem 1 - Template de um website, com destaque para os possíveis componentes (Fonte da
imagem: do autor)
Cada componente tem seu arquivo TypeScript, seu arquivo HTML e seu arquivo CSS, como
mostrado na figura abaixo:
Imagem 2 - Estrutura de um componente (Fonte da imagem: do autor)
Esses componentes podem ser alterados com facilidade sem impactar o funcionamento de todo
o sistema e reutilizados em diferentes partes do código, facilitando a manutenção da aplicação.
Criando componentes
[Link] 2/7
07/06/2023, 14:45 Class Let's Code
Para criarmos um componente em Angular, podemos criar um arquivo my-first-
[Link] com o seguinte conteúdo:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-first-component',
templateUrl: './[Link]',
})
export class MyFirstComponent {}
Utilizando o decorator @Component , com o selector e templateUrl , nós estamos
transformando o que seria apenas uma classe normal em um componente.
Após a criação do arquivo TypeScript, precisamos criar o template deste componente que,
conforme definimos para o templateUrl na declaração do componente, será my-first-
[Link] .
Com o componente criado, estamos quase prontos para usá-lo!
Hmmm, mas o que falta?
Nós precisamos declará-lo no nosso AppModule . Mais pra frente, iremos entrar em detalhes
sobre o que são Modules. Por enquanto, você só precisa saber que o Angular não sabe que seu
componente existe até você declará-lo no seu Module. Apenas criar o componente não é
suficiente.
Imagem 3 - Declarando um componente no Módulo (Fonte da imagem: do autor)
[Link] 3/7
07/06/2023, 14:45 Class Let's Code
Essa é a forma manual de criar um componente, porém podemos criar componentes de forma
automatizada utilizando comandos da CLI.
Para criar um componente utilizando o Angular CLI, usamos o seguinte comando ng generate
component <nome> ou, de forma abreviada, ng g c <nome> .
Dessa forma, o componente é importado automaticamente no NgModule e você não precisa
declará-lo manualmente como fizemos anteriormente.
Com o componente criado, de forma manual ou automática, já podemos começar a utilizá-lo!
Templates e estilos dos componentes
O template do componente não precisa estar necessariamente em um arquivo HTML separado,
podemos escrevê-lo no próprio arquivo TypeScript, dessa forma:
@Component({
selector: 'app-my-first-component',
template: `
<h3>Este é o meu Primeiro Componente</h3>
<app-my-second-component></app-my-second-component>`
})
Até agora, utilizamos apenas componentes sem estilo, com o HTML puro. Como fazemos para
melhorar a aparência dos nossos componentes? Utilizaremos os arquivos .css destes
componentes.
Como exemplo, vamos deixar todas as tags h1 do nosso projeto com letra azul. No arquivo
[Link] , escrevemos o seguinte código CSS:
Imagem 6 - Aplicando estilo ao projeto (Fonte da imagem: do autor)
Todavia, se quisermos aplicar um estilo exclusivo de determinado componente, podemos definir
o CSS dentro do próprio arquivo TypeScript. Assim como no template HTML, também podemos
fazê-lo da seguinte forma:
@Component({
selector: 'app-my-first-component',
[Link] 4/7
07/06/2023, 14:45 Class Let's Code
templateUrl: './[Link]',
styles: [`
h1 {
color: blue;
}
`]
})
Ou, ainda, criando um arquivo para o CSS do componente, o my-first-
[Link] . E nele, então implementar os estilos desejados. No decorator
@Component substituir o styles por styleUrls .
@Component({
selector: 'app-my-first-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
Seletores
O seletor é a propriedade utilizada para identificar um componente na árvore de componentes.
É através dele que podemos invocar um componente que será renderizado em determinado
momento e local na aplicação. No exemplo anterior, ao criar um componente, dentro do
decorator @Component() , a propriedade selector recebeu como valor app-my-first-
component . Com este seletor, podemos utilizar o MyFirstComponent no AppComponent ou em
outro componente do nosso projeto.
@Component({
selector: 'app-my-first-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
Além do seletor de elemento, que é o padrão do Angular, podemos criar seletores de dois tipos:
seletor de atributo e seletor de classe.
O seletor de atributo é declarado da seguinte forma:
@Component({
selector: '[app-my-first-component]',
[Link] 5/7
07/06/2023, 14:45 Class Let's Code
templateUrl: './[Link]'
})
Para utilizar esse seletor em algum template, escrevemos de forma diferente:
<div app-my-first-component></div>
O seletor de classe é declarado da seguinte forma:
@Component({
selector: '.app-my-first-component',
templateUrl: './[Link]'
})
E utilizado da seguinte forma nos templates:
<div class="app-my-first-component"></div>
Embora seja possível declarar um componente utilizando seletores de atributo e seletores de
classe, não é o recomendado. Criar seletores dessa forma dificulta a identificação do
componente por outros desenvolvedores ou em uma posterior manutenção no código. Para
saber mais, consulte o Angular coding style guide.
Aninhando e replicando componentes
Uma das coisas que podemos fazer com os componentes é aninhar um componente dentro do
outro utilizando seus respectivos seletores. Imagine que temos dois componentes:
MyFirstComponent e MySecondComponent com seus respectivos seletores app-my-first-
component e app-my-second-component , e queremos chamar o componente
MySecondComponent dentro do componente MyFirstComponent . Então no componente
MyFirstComponent , podemos simplesmente incluir no seu template o seletor de
MySecondComponent , dessa forma:
[Link] 6/7
07/06/2023, 14:45 Class Let's Code
Imagem 4 - Aninhando componentes (Fonte da imagem: do autor)
Também é possível replicar o mesmo componente várias vezes na tela:
chevron_left Tópico anterior Próximo Tópico chevron_right
[Link] 7/7