Angular Essenciais

Aqui está uma breve visão geral da arquitetura envolvida e dos blocos de construção que serão abordados neste Guia:

• NgModules - Declara um contexto de compilação para um conjunto de componentes dedicados a um domínio de aplicativo, um fluxo de trabalho ou um conjunto relacionado de recursos.
• Componentes - Define uma classe que contém dados e lógica do aplicativo e funciona com um modelo HTML que define uma visualização.
• Modelo - Combina HTML com marcação Angular que pode modificar elementos HTML antes que eles sejam exibidos.
• Diretiva - Anexa comportamento personalizado a elementos no DOM.
• Ligação de dados bidirecional - Coordena as partes de um modelo com as partes de um componente.
• Serviços - Normalmente, uma classe usada para aumentar a modularidade e a reutilização com um propósito restrito e bem definido.
• Injeção de dependência - Fornece componentes com os serviços necessários e dá acesso a uma classe de serviço.
• Roteamento - Facilita a implementação da navegação dentro do aplicativo.

Este diagrama representa melhor a relação entre os blocos de construção:

Para configurar o ambiente, você deve começar baixando Angular com a ferramenta Angular CLI. Se você tem uma máquina que não tem Node.js e npm instalados, certifique-se de baixá-los e instalá-los aqui. Então, você executará uma instalação global do Angular CLI:

npm install --g @angular/cli

NgModule em Angular

Chegamos à seguinte questão “O que é NgModule em Angular”? Basicamente, NgModule em Angular é uma classe que é marcada pelo decorador @NgModule. NgModules são excelentes para organizar itens relacionados e funcionam para configurar tanto o injetor quanto o compilador.

Este decorador tem as informações sobre como compilar o template de um componente e como criar um injetor em tempo de execução, tudo dentro de um objeto de metadados. Como você pode imaginar, @NgModule serve para identificar e preencher a lacuna entre suas próprias diretivas, componentes, pipes e componentes externos que dependem dessas peças.

Este decorador tinha as informações sobre como compilar um template de componente e como criar um injetor em tempo de execução, tudo dentro de um objeto de metadados. Como você pode imaginar, @NgModule serve para identificar e preencher a lacuna entre suas próprias diretivas, componentes e pipes, e componentes externos que dependem dessas peças.

A propriedade exports também torna pública parte da composição do módulo, garantindo que os componentes externos possam usá-los efetivamente.

Por fim, o @NgModule também adiciona provedores de serviços aos injetores de dependência do aplicativo, tornando o aplicativo fundamentalmente mais adaptável.

As diretivas criam elementos DOM e alteram sua estrutura ou comportamento em um aplicativo Angular. Existem três tipos de diretivas no Angular:

• Componentes - Diretivas com modelos.
• Diretivas de atributo - Alteram a aparência e o comportamento de um elemento, componente ou outra diretiva.
• Diretivas estruturais - Altere o layout do DOM adicionando ou removendo elementos.

Componentes

Em aplicações Angular, o que você vê no navegador (ou em outro lugar) é um componente. Um componente consiste nas seguintes partes:

• Uma classe TypeScript chamada classe Component
• Um arquivo HTML chamado de modelo do componente
• Um arquivo CSS opcional para o estilo do componente.
• Uma classe para armazenar dados e a lógica.
• Modelo HTML e estilos para exibir dados no aplicativo. Também é chamado de visualização e é visto pelo usuário na tela para interagir.
• Metadados que definem o comportamento de um componente. Metadados de componentes são aplicados à classe usando o decorador @Component. Comportamentos diferentes do componente podem ser passados como propriedades do objeto, que é um parâmetro de entrada do decorador @Component.

Um componente é um tipo de diretiva com seu próprio template. Tudo o que você vê em uma aplicação Angular é um componente.

Metadados do componente

O decorador @Component decora uma classe como um componente. É uma função que recebe um objeto como parâmetro. No decorador @Component, podemos definir os valores de diferentes propriedades para definir o comportamento do componente. As propriedades mais usadas são as seguintes:

• modelo
• modeloUrl
• Provedores
• estilos
• estiloUrls
• seletor
• encapsulamento
• detecção de mudança
• animações
• provedores de visualização

Além das mencionadas acima, há também algumas outras propriedades importantes. Vamos examiná-las uma por uma.

Detecção de Mudança Angular

Para responder rapidamente à pergunta “o que é detecção de alterações no Angular”, digamos que é o processo pelo qual Angular verifica se o estado do seu aplicativo foi modificado e se algum DOM precisa ser atualizado posteriormente. Esta propriedade determina como o detector de alterações funcionará para o componente. Definimos a ChangeDetectionStrategy do componente na propriedade. Existem dois valores possíveis:

• Padrão
• Empurre

Abordaremos essa propriedade em detalhes em seções futuras.

Encapsulamento

Esta propriedade determina se Angular criará um shadow DOM para um componente. Ela determina o modo ViewEncapsulation do componente. Há quatro valores possíveis:

• Emulado (este é o padrão)
• Nativo
• Nenhum
• Sombra Dom

Usando um componente

Um componente pode ser usado dentro de um aplicativo Angular de várias maneiras:

• Como um componente raiz.
• Como um componente filho. Podemos usar um componente dentro de outro Component.
• Navegue até um componente usando roteamento. Neste caso, o componente será carregado no RouterOutlet.
• Carregando componente dinamicamente usando ComponentFactoryResolver.

O componente deve ser parte de um módulo. Para usar um componente em um módulo, primeiro importe-o e depois passe-o para o array de declaração do módulo.

@NgModule({
declarações: [
Componente de aplicativo,
Componente do produto
]
})

Componentes autônomos

Com o lançamento do Angular 14, podemos construir componentes autônomos e eles não precisam ser declarados em um NgModule. Eles gerenciam suas próprias dependências e podem importar diretamente outro componente autônomo.

Você pode criar um componente autônomo com:

ng gc {componentName} --standalone

Se você quiser usar outros componentes, diretivas ou pipes em um modelo autônomo, ao definir o sinalizador “standalone”, você pode importar o que for necessário diretamente para o próprio componente autônomo.

importar { Componente, OnInit } de '@angular/core';
importar { CommonModule } de '@angular/common';
@Componente({
seletor: 'app-card', autônomo: verdadeiro, importações: [CommonModule], templateUrl: './card.component.html', styleUrls: ['./card.component.css']})
classe de exportação CardComponent implementa OnInit {
construtor() {} ngOnInit(): void {}}

Componentes autônomos podem aproveitar ao máximo o ecossistema Angular.

Angular nos forneceu muitas diretivas estruturais e de atributos embutidas. As diretivas estruturais embutidas são *ngFor e *ngIf. As diretivas de atributos são NgStyle e NgModel.

Usando diretivas estruturais Angular

*ngIf é uma diretiva de estrutura usada para fornecer uma condição "if" para as instruções serem executadas. Se a expressão for avaliada como um valor False, os elementos serão removidos do DOM. Se for avaliada como True, o elemento será adicionado ao DOM. Considere a listagem abaixo. Nisso, a diretiva *ngIf adicionará div no DOM se o valor da propriedade showMessage for True.

@Componente({
Seletor: 'app-message', Modelo: ` < div *ngIf=”showMessage” >Mostrar mensagem </div> `})
exportar classe AppMessageComponent { showMessage = true; }

Tenha em mente que *ngIf não oculta ou mostra um elemento DOM. Em vez disso, ele adiciona ou remove dependendo da condição. A diretiva de estrutura *ngFor cria elementos DOM em um loop. Considere a listagem abaixo. Nisso, a diretiva *ngFor adicionará linhas em uma tabela o número de itens na matriz de dados.

@Componente({
Seletor: 'app-message', Modelo: ` <table> <tr *ngFor='let f of data'> <td>{{f.name}}</td> </tr> </table> `})
exportar classe AppMessageComponent { dados = [ {nome : 'foo'}, {nome: 'koo'} ]; }

Na maioria dos casos, você não precisará criar diretivas estruturais personalizadas; diretivas integradas devem ser suficientes.

Diretiva de Imagem Angular

A diretiva image foi lançada para visualização do desenvolvedor na versão 14.2 do Angular e faz parte de uma versão estável a partir da 15.0. A diretiva NgOptimizedImage otimiza o carregamento de imagens, o que pode melhorar significativamente o LCP. Ela prioriza o carregamento de imagens críticas, carrega preguiçosamente imagens não prioritárias por padrão e define automaticamente o atributo fetchpriority notag. Além disso, ele tem um aviso integrado para garantir que o código esteja seguindo as melhores práticas. Suas propriedades disponíveis são:

• ngSrc - contém o nome da imagem que será processada pelo carregador e aplicada à propriedade src.
• ngSrcset - contém uma lista de descritores de largura e densidade
• Largura - a largura da imagem em pixels
• Altura - a altura da imagem em pixels
• Carregando - define o tipo, pode ser preguiçoso, ansioso ou automático
• Prioridade - indica se a imagem deve ser carregada com alta prioridade

NgOptimizedImage é uma diretiva autônoma e pode ser importada diretamente para o componente ou para o ngModule necessário.

importar { NgOptimizedImage } de '@angular/common';

// Exemplo com um componente não autônomo
@NgModule({
importações: [NgOptimizedImage],})
classe AppModule {}

// Exemplo com componente autônomo
@Componente({
autônomo: verdadeiro importações: [NgOptimizedImage],})
classe StandaloneComponent {}

O que é Data Binding em Angular

A vinculação de dados determina como os dados fluem entre a classe do componente e um modelo de componente. Isso é usado como uma técnica que vincula dados à camada de visualização. A vinculação de dados no Angular é fácil e, diferentemente do WPF, você não precisa se preocupar com contexto de dados, modelo de visualização ou INotifyPropertyChanged (INPC). A única coisa que você precisa é de um arquivo HTML e um arquivo typescript.

Angular nos fornece três tipos de vinculações de dados:

• Interpolação
• Vinculação de propriedade
• Ligação de evento

O que é interpolação em Angular

A interpolação Angular é uma vinculação de dados unidirecional. Ela é usada para passar dados da classe do componente para o template. A sintaxe da interpolação é {{propertyname}}.

Digamos que temos uma classe de componente como a mostrada abaixo:

exportar classe AppComponent {produto = { título: 'Taco de críquete', preço: 500 };}

Devemos passar o produto da classe de componente para o modelo. Tenha em mente que, para manter o exemplo simples, estamos codificando o valor do objeto do produto. No entanto, em um cenário real, os dados podem ser buscados do banco de dados usando a API. Podemos exibir o valor do objeto do produto usando interpolação, conforme mostrado na listagem abaixo:

<h1>Produto</h1>
<h2>Título: {{product.title}}</h2>
<h2>Preço: {{product.price}}</h2>

Usando interpolação, os dados são passados da classe de componente para o template. Idealmente, sempre que o valor do objeto do produto for alterado, o template será atualizado com o valor atualizado do objeto do produto.

No Angular, há algo chamado serviço detector de alterações. Ele garante que o valor da propriedade na classe do componente e o modelo estejam sincronizados entre si.

Portanto, se você quiser exibir dados no Angular, você deve usar a vinculação de dados de interpolação.

Vinculação de propriedade

Angular fornece outro tipo de binding, chamado property binding. A sintaxe de um property binding é o colchete: []. Ele permite definir a propriedade de elementos HTML em um template com a propriedade da classe component.

Então, digamos que você tenha uma classe de componente como a abaixo:

exportar classe AppComponent {
btnAltura = 100; btnLargura = 100;}

Agora, você pode definir as propriedades de altura e largura de um botão em um modelo com as propriedades da classe de componente usando a vinculação de propriedades.

<button [style.height.px] = 'btnHeight' [style.width.px] = 'btnWidth' >Adicionar produto</button>

A vinculação de propriedade Angular é usada para definir a propriedade de elementos HTML com as propriedades da classe de componente. Você também pode definir propriedades de outros elementos HTML como imagem, lista, tabela, etc. Sempre que o valor da propriedade na classe de componente mudar, a propriedade do elemento HTML será atualizada na vinculação de propriedade.

Vinculação de evento

Angular fornece um terceiro tipo de binding para capturar eventos levantados em templates em uma classe de componente. Por exemplo, há um botão no template de componente que permite que você chame uma função na classe de componente. Você pode fazer isso usando event binding. A sintaxe por trás do event binding é (eventname).

Para este exemplo de associação de eventos no Angular, você pode ter uma classe de componente como esta:

exportar classe AppComponent {
addProduct() { console.log('adicionar produto'); }}

Você quer chamar a função addProduct no clique de um botão no template. Você pode fazer isso usando event binding:

<h1>Produto</h1>
<Button (click)='addProduct()'>Adicionar produto</button>

Angular oferece a você essas três ligações. Na ligação de eventos, os dados fluem do template para a classe e na ligação de propriedades e interpolação, os dados fluem da classe para o template.

Angular não tem uma vinculação de dados bidirecional incorporada. No entanto, ao combinar vinculação de propriedade e vinculação de evento, você pode obter vinculação de dados bidirecional.

Angular nos fornece uma diretiva, ngModel, para obter vinculação de dados bidirecional, e é muito fácil de usar. Primeiro, importe FormsModule, e então você pode criar vinculação de dados bidirecional:

exportar classe AppComponent {
nome = 'foo';}

Podemos fazer uma vinculação de dados bidirecional da propriedade name com uma caixa de entrada:

<tipo de entrada="texto" [(ngModel)]='nome' /> <h2>{{nome}}</h2>

Como você vê, estamos usando [(ngModel)] para criar vinculação de dados bidirecional entre o controle de entrada e a propriedade name. Sempre que um usuário altera o valor da caixa de entrada, a propriedade name será atualizada e vice-versa.

Tubos

Pipes são funções que são usadas em templates para transformar dados. Angular nos fornece um conjunto de pipes embutidos que podem ser usados em qualquer template.

DatePipe formata a data para uma string:

<p>Data de início: {{valor | data: 'dd/MM/aaaa'}}</p>

PercentagePipe converte valor em porcentagem:

valor = 0,2;
…
<p>Porcentagem: {{valor | percentual}}</p> // 20%

Transformação de maiúsculas e minúsculas em uma string:

<p>Texto em minúsculas: {{valor | minúsculas}}</p>
<p>Texto em maiúsculas: {{valor | maiúsculas}}</p>

Criando um Pipe Personalizado

Podemos precisar de uma transformação específica que não seja interna, então podemos criar uma personalizada. Devemos criar uma classe que implemente a classe PipeTransform, e nossa lógica deve ser colocada no método transform.

importar { Pipe, PipeTransform } de '@angular/core';
@Cano({
nome: 'capitalizar'})
classe de exportação CapitalizePipe implementa PipeTransform {
transformação pública(texto: string): string { return text[0].toUpperCase() + text.slice(1); }}

Então, para usá-lo, precisamos registrá-lo em nossas declarações de módulo.

No Angular, os componentes se comunicam entre si para compartilhar dados como objetos, strings, números, arrays ou HTML.

Para entender a comunicação de componentes, primeiro, precisamos entender o relacionamento entre os componentes. Por exemplo, quando dois componentes não estão relacionados entre si, eles se comunicam por meio de um serviço Angular.

Quando você usa um componente dentro de outro componente, você cria uma hierarquia de componentes. O componente Angular sendo usado dentro de outro componente é conhecido como componente filho e o componente envolvente é conhecido como componente pai. Conforme mostrado na imagem abaixo, no contexto de AppComponent, app-child é um componente filho e AppComponent é um componente pai.

importar { Componente } de '@angular/core';
@Componente({
seletor: 'app-root', modelo: ` <h1>Olá {{message}}</h1> <app-child></app-child> //componente filho `}) export class AppComponent { //componente pai message = 'Eu sou pai';}

Os componentes pai e filho podem se comunicar entre si das seguintes maneiras:

• @Entrada()
• @Saída()
• Variável de referência de temperatura
• Ver criança
• ConteúdoCriança

Quando os componentes não estão relacionados entre si, eles se comunicam usando serviços. Caso contrário, eles se comunicam usando uma das várias opções, dependendo dos critérios de comunicação. Vamos explorar todas as opções, uma por uma.

@ENTRADA

Você pode passar dados de um componente pai para um componente filho usando o decorador @Input. Os dados podem ser de qualquer formato, como string, número, objeto, array, etc. do tipo primitivo.

Para entender o uso de @Input, vamos criar um componente:

importar { Componente } de '@angular/core';
@Componente({
seletor: 'app-child', modelo: `<h2> Olá {{greetMessage}}</h2>`})
exportar classe AppChildComponent {
greetMessage = 'Eu sou criança';}

AppComponent está usando AppChildComponent, então AppComponent é o componente pai e AppChildComponent é o componente filho. Para passar dados, o decorador @Input usa as propriedades do componente filho. Para fazer isso, precisaremos modificar o AppChildComponent filho conforme mostrado na listagem abaixo:

importar { Componente, Entrada, OnInit } de '@angular/core';
@Componente({
seletor: 'app-child', modelo: `<h2> Olá {{greetMessage}}</h2>`})
classe de exportação AppChildComponent implementa OnInit {
@Input() mensagem de saudação: string; construtor() { } ngOnInit() { }}

Como você pode notar, modificamos a propriedade greetMessage com o decorador @Input(). Então, essencialmente, no componente filho, decoramos a propriedade greetMessage com o decorador @Input() para que o valor da propriedade greetMessage possa ser definido a partir do componente pai. Em seguida, vamos modificar o componente pai AppComponent para passar dados para o componente filho.

importar { Componente } de '@angular/core';
@Componente({
seletor: 'app-root', modelo: ` <h2>Olá {{message}}</h2>`})
exportar classe AppComponent {
message = 'Eu sou pai'; childmessage = 'Eu fui passado do componente pai para o filho';}

Do componente pai, estamos definindo o valor da propriedade greetMessage do componente filho. Para passar um valor para o componente filho, precisamos passar a propriedade do componente filho dentro de um colchete e definir seu valor para qualquer propriedade do componente pai. Estamos passando o valor da propriedade childmessage do componente pai para a propriedade greetMessage do componente filho.

@SAÍDA

Você pode emitir o evento do componente filho para o componente pai usando o decorador @Output.

Variável de referência de temperatura

Veja como podemos usar Event binding para obter two-way binding no Angular. Usamos @Output para emitir um evento para outro componente. Vamos modificar AppChildComponent conforme mostrado na listagem abaixo:

importar { Componente, Entrada, EventEmitter, Saída } de '@ angular/core';
@Componente({
seletor: 'app-child', modelo: `<button (click)=”handleClick()”>Clique em mim</button> `})
exportar classe AppChildComponent {
handleClick() { console.log('ei, fui clicado em filho'); }}

Há um botão no template AppChildComponent chamando a função handleClick. Vamos usar o componente app-child dentro do AppComponent como mostrado na listagem abaixo:

importar { Componente, OnInit } de '@angular/core';
@Componente({
seletor: 'app-root', modelo: ``})
classe de exportação AppComponent implementa OnInit {ngOnInit() { }}

Aqui, estamos usando AppChildComponent dentro de AppComponent. Dessa forma, criando um tipo de relacionamento pai/filho em que AppComponent é o pai e AppChildComponent é o filho. Quando executarmos o aplicativo, veremos esta mensagem no console do navegador:

Até agora, é bem simples usar a vinculação de eventos para fazer o botão chamar a função no componente. Agora, vamos ajustar um pouco o requisito. E se você quiser executar uma função de AppComponent no evento de clique de um botão dentro de AppChildComponent?

Para fazer isso, você deve emitir o evento de clique de botão de AppChildComponent. Importe EventEmitter e produza de @angular/core.

Aqui, vamos emitir um evento e passar um parâmetro para o evento. Modifique AppChildComponent conforme mostrado na próxima listagem de código:

importar { Componente, EventEmitter, Saída } de '@angular core';
@Componente({
seletor: 'app-child', modelo: `<button (click)=”valueChanged()”>Clique em mim</button>`})
exportar classe AppChildComponent {
@Output() valueChange = novo EventEmitter(); contador = 0; valorChanged() { este.contador = este.contador + 1; este.valueChange.emit(este.contador); }}

Executamos as seguintes tarefas na classe AppChildComponent:

• Criei uma variável chamada counter que será passada como parâmetro do evento emitido.
• Criou um EventEmitter valueChange que será emitido para o componente pai.
• Criou uma função chamada valueChanged(). Essa função é chamada no evento click do botão, e dentro da função, o evento valueChange é emitido.
• Ao emitir o evento valueChange, o valor do contador é passado como um parâmetro. No componente pai AppComponent, o componente filho AppChildComponent pode ser usado como mostrado na listagem abaixo:

importar { Componente, OnInit } de '@angular/core';
@Componente({
seletor: 'app-root', modelo: ` <app-child (valueChange)='displayCounter($event)'> `})
classe de exportação AppComponent implementa OnInit {
ngOnInit() { } displayCounter(contagem) { console.log(contagem); }}

No momento, estamos executando as seguintes tarefas na classe AppComponent:

• Usando <app-child> no modelo.
• No elemento <app-child>, usando a associação de eventos para usar o evento valueChange.
• Chamando a função displayCounter no evento valueChange.
• Na função displayCounter, imprimindo o valor do contador passado do AppChildComponent.

Como você pode ver, a função de AppComponent é chamada no evento de clique do botão colocado no AppChildComponent. Isso pode ser feito com @Output e EventEmitter. Quando você executa o aplicativo e clica no botão, você pode ver o valor do contador no console do navegador. Cada vez que você clica no botão, o valor do contador é aumentado em 1.