Componentes em Angular

Um dos elementos fundamentais de uma aplicação Angular são os componentes. Um componente controla a exibição da interface na tela.

Vamos criar um componente simples que exibe uma mensagem de boas-vindas:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule],
  template: `<label>Digite seu nome:</label>
    <input [(ngModel)]="name" placeholder="name" />
    <h1>Bem-vindo(a) {{ name }}!</h1>`,
})
export class AppComponent {
  name = "";
}

Para que a classe possa ser usada em outros módulos e componentes, ela é definida com a palavra-chave export. Dentro da classe, há apenas uma variável que armazena uma string.

Para criar um componente, é necessário importar a função decoradora @Component da biblioteca @angular/core. O decorador @Component permite identificar a classe como um componente.

Se não aplicássemos o decorador @Component à classe AppComponent, ela não seria considerada um componente.

O decorador @Component aceita um objeto de configuração como parâmetro, que informa ao framework como trabalhar com o componente e sua interface. A classe Component possui muitos parâmetros que podem ser consultados na documentação oficial. A maioria desses parâmetros será abordada em artigos posteriores, portanto, nesta seção, vamos focar apenas nos que foram usados no código acima:

• selector: Define o seletor CSS. O Angular adicionará a interface do componente ao elemento com esse seletor. No exemplo acima, o seletor é "my-app", portanto, a página HTML da aplicação deve conter o elemento <my-app></my-app>, que será usado para renderizar a interface do componente.
• standalone: Indica se o componente será autônomo ou não. A seguir, exploraremos com mais detalhes a diferença entre componentes autônomos e não autônomos.
• imports: Especifica os módulos que devem ser importados. Se o componente utilizar módulos específicos, eles devem ser indicados aqui. No exemplo acima, o componente define um campo de entrada de texto, e para trabalhar com campos de entrada e elementos de formulário, é utilizado o módulo FormsModule, que é importado pelo AppComponent.

• template: É a parte visual do componente, representando um trecho de código HTML com elementos Angular. O template é a interface que o usuário verá ao interagir com a aplicação.

  Cada componente deve ter um template. No entanto, não é obrigatório definir o template diretamente através da propriedade template. É possível externalizar o template para um arquivo HTML separado e utilizar a propriedade templateUrl para referenciá-lo.

  O template pode ser definido em uma única linha ou em várias linhas. Se for multilinhas, deve ser delimitado por crases (`), que se diferenciam das aspas simples (').

Componentes Autônomos

A partir da versão 14 do Angular, foi introduzida a ideia de componentes autônomos (standalone components). Na versão 16, essa funcionalidade saiu da fase beta e foi oficialmente lançada. Componentes autônomos são diferentes porque não precisam fazer parte de módulos, ou seja, são independentes e podem ser utilizados por conta própria. Para definir esses componentes, é usada a propriedade standalone: true no decorador Component.

Esses componentes gerenciam suas próprias dependências através da propriedade imports no decorador Component. Além disso, componentes autônomos podem ser importados em outros componentes autônomos.

Vale ressaltar que a equipe de desenvolvimento do Angular recomenda, a partir da versão 16, o uso de componentes autônomos para novos projetos. Portanto, também seguiremos essa abordagem nos próximos exemplos. No entanto, também exploraremos abordagens alternativas com o uso de módulos e componentes não autônomos.

Carregando Componentes

Independentemente de quantos componentes existam em uma aplicação, um deles é o principal, e este, por sua vez, carrega todos os outros componentes. O Angular permite o carregamento direto do componente principal.

Por exemplo, considere um projeto com a seguinte estrutura básica:

helloapp/
|-- angular.json
|-- package.json
|-- tsconfig.json
|-- node_modules/
|-- src/
  |-- index.html
  |-- main.ts  --->  Carrega o AppComponent
  |-- app/
      |-- app.component.ts  <--- Definição do AppComponent

Na pasta src/app, definimos um componente simples no arquivo app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "my-app",
  standalone: true,
  template: "<h1>Hello Programício</h1>",
})
export class AppComponent {}

Aqui temos uma classe AppComponent vazia, onde foi definido apenas o seletor "my-app" e um template com um cabeçalho. Na página index.html, definimos o elemento my-app:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello Programício</title>
  </head>
  <body>
    <my-app>Carregando...</my-app>
  </body>
</html>

Para carregar o componente principal no arquivo main.ts, utilizamos o seguinte código:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
bootstrapApplication(AppComponent).catch((e) => console.error(e));

Aqui, a função bootstrapApplication é usada para carregar o componente AppComponent. Na primeira linha do arquivo, a função bootstrapApplication() é importada do módulo "@angular/platform-browser". Na segunda linha, é importado o componente principal AppComponent.

Em seguida, a chamada bootstrapApplication(AppComponent) inicia a aplicação Angular e exibe o componente autônomo como o componente raiz da aplicação.

Após gerar e executar a aplicação, o componente especificado na função bootstrapApplication() será carregado no elemento correspondente da página web:

Vale mencionar que essa função retorna um objeto Promise<ApplicationRef>. Isso permite obter um objeto ApplicationRef, que representa a aplicação Angular em si.

const appRef: ApplicationRef = await;
bootstrapApplication(AppComponent);