Dominando a vinculação angular de dados: um guia abrangente para especialistas

Angular é uma estrutura JavaScript popular usada para construir aplicativos da web. Foi desenvolvido pelo Google e lançado pela primeira vez em 2010. De acordo com Pesquisa de desenvolvedor Stack Overflow 2022, Angular é usado por 26,36% dos desenvolvedores. Angular é conhecido por seus poderosos recursos e benefícios, como ligação de dados bidirecional, injeção de dependência e arquitetura baseada em componentes.

Este artigo tem como objetivo fornecer um guia completo para desenvolvedores que desejam dominar a vinculação Angular. Vincular dados em Angular é um conceito crítico que permite aos desenvolvedores sincronizar dados entre o componente e a visualização em tempo real. Os desenvolvedores podem criar aplicativos mais dinâmicos e responsivos ao compreender e implementar a vinculação de dados de maneira eficaz.

Este artigo abordará os diferentes tipos de vinculações de dados em Angular, incluindo vinculação unidirecional, bidirecional e de evento. Ele também fornecerá dicas e práticas recomendadas para otimizar o desempenho e evitar armadilhas comuns.

O que é vinculação de dados?

Os componentes são os principais blocos de construção do aplicativo, pois tendem a gerenciar as operações de dados e o comportamento do aplicativo, enquanto o modelo é responsável por renderizar os elementos HTML de qualquer layout e estrutura da interface do usuário enviada a ele.

Um componente e uma visualização precisam estar conectados para que o aplicativo funcione corretamente. A vinculação de dados entra em cena quando há uma conexão entre eles. É uma parte vital de um aplicativo Angular porque fornece sincronização automática entre o componente e a visualização. Curiosamente, o Angular oferece várias maneiras de vincular dados.

Imagine se a vinculação de dados não existisse. Nesse caso, os desenvolvedores, incluindo aqueles envolvidos na terceirização do desenvolvimento Angular, teriam que escrever manualmente uma lógica complexa para atualizar as visualizações sempre que ocorresse uma alteração. A vinculação de dados automatizou o processo e tornou mais fácil para os desenvolvedores, especialmente aqueles que terceirizam o desenvolvimento Angular, a criação de aplicativos interativos.

Importância da vinculação de dados em aplicativos angulares

Vejamos alguns benefícios da vinculação de dados no Angular que a tornam um recurso importante.

Tipos de vinculação de dados angular

Agora, vamos mergulhar nos diferentes tipos de ligações em Angular nesta seção. Para este guia, usaremos o Angular versão 15.

Interpolação

O tipo mais importante de dados vinculativos é a interpolação. Ele permite que os desenvolvedores exibam os valores dinamicamente do componente para o modelo. Uma variável é definida no componente e chamada no modelo. Angular encontra a variável na classe do componente correspondente àquela chamada no modelo e então exibe os valores dinamicamente. É representado por chaves duplas ({{ }}). Você pode usar números, strings, etc. diretamente entre colchetes duplos. Vejamos um exemplo.

Na classe de componentes:

name="John Doe";

No modelo:

<p>Welcome, {{ name }}!</p>

Vinculação de propriedade

A vinculação de propriedades usa as propriedades ou atributos do DOM e os vincula às propriedades dos componentes. Isso permite que o componente atualize dinamicamente as propriedades do DOM. Para usar a vinculação de propriedades, os desenvolvedores usam colchetes ( ) no modelo, seguidos pelo nome da propriedade DOM à qual está vinculada e pelo nome da propriedade do componente entre aspas.

Vejamos um exemplo para entender como a vinculação de propriedades é implementada.

Na classe de componentes:

export class AppComponent {
  imgUrl="
}

No modelo:

<img (src)="imgUrl" alt="An image">

Aqui, a ligação de propriedade é usada para vincular o atributo src do elemento img à propriedade imgUrl do componente. Portanto, a imagem exibida no elemento img mudará dinamicamente com base no valor da propriedade imgUrl.

Você pode vincular atributos desativados, href, classe e semelhantes usando vinculação de propriedade.

Vinculação de evento

A vinculação de eventos permite manipular eventos que ocorrem no DOM, como cliques de botões ou movimentos do mouse, e executar funções no componente.

Para vincular um evento DOM a um método de componente, você usa a sintaxe de parênteses:

<button (click)="myFunction ">Click me!</button>

Neste exemplo, o evento (click) está vinculado ao método myFunction na classe do componente. Ao clicar no botão, o método myFunction será executado.

Aqui está outro exemplo que mostra como passar um objeto de evento para o método:

<button (mousemove)="onMouseMove($event)">Move the mouse over me!</button>

O objeto $event é passado para o método onMouseMove na classe do componente, que pode então ser usado para acessar informações sobre o movimento do mouse e o evento alvo.

Vinculação de dados bidirecional

A sincronização bidirecional de dados entre o componente e um modelo é conhecida como ligação bidirecional. Isso significa que sempre que os dados são alterados no modelo, o componente é atualizado de acordo e, sempre que o componente é atualizado, o modelo também é atualizado.

A diretiva ngmodel é usada para implementar a ligação bidirecional. Ele vincula o valor do elemento de entrada a uma propriedade do componente e vice-versa. A diretiva ngmodel faz parte do FormModule; portanto, ele deve ser importado para o AppModule para que possa ser usado.

Vejamos o exemplo a seguir para ver como a diretiva ngmodel é usada para ligação de classe bidirecional aqui.

<input ((ngModel))="name" placeholder="Enter your name">
<p>Hello {{name}}!</p>

A propriedade name do componente está vinculada ao valor do campo de entrada usando a diretiva ngmodel. Isso significa que quaisquer alterações feitas no campo de entrada atualizarão automaticamente o valor de entrada na propriedade name e quaisquer alterações feitas na propriedade name serão refletidas no campo de entrada.

Observe que para que a diretiva ngmodel funcione, você também deve fornecer um atributo name para o elemento input. Veja o exemplo a seguir.

<input ((ngModel))="name" name="name" placeholder="Enter your name">

Agora, vamos passar para técnicas mais avançadas que podem ser implementadas em uma aplicação Angularjs.

Técnicas avançadas de vinculação de dados

Usando RxJS e observáveis ​​com vinculação de dados

Os observáveis ​​lidam com fluxos de dados assíncronos e gerenciam com eficiência o fluxo de dados em um aplicativo Angular. RxJS é uma biblioteca usada junto com Observables para compor funcionalidades assíncronas.

Para lidar com Observáveis, o pipe assíncrono é usado. O pipe assíncrono assina um Observable e cancela automaticamente a assinatura quando o componente é destruído. Esse comportamento evita vazamentos de memória e facilita o gerenciamento de assinaturas.

Vejamos um exemplo para implementar Observáveis ​​usando RxJs.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <h1>Current value: {{ value$   async }}</h1>
    <button (click)="updateValue ">Update value</button>
  `
})
export class ExampleComponent implements OnInit {
  value$: Observable<number>;

  ngOnInit  {
    // initialize the Observable
    this.value$ = new Observable(observer => {
      let i = 0;
      setInterval(  => {
        observer.next(i++);
      }, 1000);
    });
  }

  updateValue  {
    // update the value of the Observable
    // this will be reflected in the template via the async pipe
    this.value$ = new Observable(observer => {
      let i = 10;
      setInterval(  => {
        observer.next(i--);
      }, 1000);
    });
  }
}

O ExampleComponent com um valor$ Obervable fornece um número a cada segundo. O pipe assíncrono no modelo é usado para exibir o valor do valor atual do Observável.

Um botão no arquivo HTML atualiza o valor$ Observable para exibir dados com os números atualizados. Isso é refletido automaticamente pelo uso de canal assíncrono.

Carregamento dinâmico de componentes

Para alcançar uma arquitetura mais flexível e modular, utilizamos componentes dinâmicos. Componentes dinâmicos ajudam a criar e carregar componentes em tempo de execução. Para carregar um componente dinamicamente, uma classe ComponentFactoryResolverClass precisa ser instanciada. Em seguida, o componente é adicionado à visualização do componente host usando a classe ViewContainerRef.

Os decoradores @Input e @Output são usados ​​para vincular dados dinamicamente entre o componente host e o componente carregado dinamicamente. Vejamos os exemplos de código abaixo para ver como vincular dados dinamicamente.

1. Crie o componente carregado dinamicamente.

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

@Component({
  selector: 'app-dynamic-component',
  template: `
    <p>Dynamic component loaded!</p>
    <p>{{dynamicData}}</p>
  `
})
export class DynamicComponent {
  @Input  dynamicData: string;
}

2. Use as classes ComponentFactoryResolver e ViewContainerRef no componente host para carregar o componente dinâmico.

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-host-component',
  template: `
    <div #container></div>
  `
})
export class HostComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadDynamicComponent(dynamicData: string) {
    this.container.clear ;

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
    componentRef.instance.dynamicData = dynamicData;
  }
}

3. Use o pipe assíncrono para manipular os dados de Observables e chame loadDynamicComponent no modelo do componente host para carregar dinamicamente o componente e vincular os dados.

<div *ngIf="dynamicData$   async as dynamicData">
  <button (click)="loadDynamicComponent(dynamicData)">Load dynamic component</button>
</div>

No código a seguir, dynamicData$ é um Observable que fornece os dados a serem passados ​​para o componente carregado dinamicamente. Assim que o usuário clica no botão, o método loadDynamicComponent é chamado com os dados e o componente dinâmico é carregado com os dados passados ​​de acordo.

Compreendendo a detecção de alterações angulares

O recurso de detecção de alterações do Angular monitora os atributos de um componente e, se necessário, atualiza a visualização para refletir as modificações.

Para maximizar o desempenho de aplicativos vinculados a dados, é crucial entender como ele funciona, pois permite que os desenvolvedores evitem fazer alterações desnecessárias na visualização.

Por padrão, sempre que um usuário faz uma alteração no Angular, toda a árvore de componentes é verificada novamente e as visualizações são atualizadas. O Angular pode verificar essas alterações de diferentes maneiras e pode ser usado para controlar como o Angular verifica as alterações.

A estratégia padrão pode ser alterada para onPush, que verifica o tipo de entrada e muda apenas quando as propriedades de entrada são alteradas ou um evento é acionado.

Outra estratégia que poderia ser implantada é um padrão imutável. O padrão sempre cria novos objetos e matrizes em vez de modificar os existentes, permitindo assim que o Angular detecte alterações com mais eficiência.

Vinculação de dados e diretivas angulares

Diretivas Estruturais e Vinculação de Dados

O DOM pode ser manipulado dinamicamente usando as diretivas estruturais ngIf e ngFor. Essas diretivas determinam o que exibir no modelo e estão intimamente relacionadas à vinculação de dados.

Por exemplo, a diretiva ngIf é usada para renderizar condicionalmente o conteúdo do modelo com base em uma expressão booleana. Vejamos a implementação:

<div *ngIf="showMessage">
  <p>Hello, world!</p>
</div>

No código acima, a diretiva *ngIf está vinculada à propriedade showMessage no componente. Se showMessage for verdadeiro, somente então os elementos HTML div e seu conteúdo serão renderizados no DOM.

A diretiva ngFor é usada para renderizar uma lista de itens no modelo. Vejamos o trecho a seguir.

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

A diretiva *ngFor está vinculada à propriedade items no componente. A diretiva ngFor cria um modelo para cada item da matriz e vincula o item à variável do item. Isso permite que o modelo exiba cada item da lista dinamicamente, eliminando assim a necessidade de manipulação manual do DOM.

Diretivas de atributos e vinculação de dados

As diretivas de atributos modificam o comportamento ou a aparência de um elemento DOM. Ele utiliza vinculação de dados para atualizar dinamicamente os atributos de um elemento com base nas alterações nos dados do componente.

Vejamos a diretiva ngClass, usada para adicionar ou remover dinamicamente uma classe de um elemento com base na propriedade de um componente, facilitando a modificação da aparência do elemento.

Aqui está um exemplo de como usar o ngClass.

// Component code
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ('./my-component.component.css')
})
export class MyComponentComponent {
  isRed: boolean = true;
}

<!-- Template code -->
<div (ngClass)="{'red': isRed, 'blue': !isRed}">This text will be red or blue depending on the value of isRed</div>

A diretiva ngClass está vinculada a um objeto com duas propriedades: vermelho e azul. O valor de cada propriedade é determinado pelo valor booleano da propriedade isRed do componente. Se isRed for verdadeiro, a classe red será aplicada ao elemento. Caso contrário, a classe azul será aplicada.

Da mesma forma, a diretiva ngStyle pode ser usada para definir dinamicamente o estilo de um elemento com base nos dados do componente. Aqui está um exemplo:

// Component code
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ('./my-component.component.css')
})
export class MyComponentComponent {
  backgroundColor: string = 'red';
}

<!-- Template code -->
<div (ngStyle)="{'background-color': backgroundColor}">This div will have a red background-color</div>

Criando diretivas personalizadas com vinculação de dados

As diretivas angulares são uma ferramenta poderosa, permitindo aos desenvolvedores criar componentes reutilizáveis ​​para modificar a funcionalidade com base no caso de uso. Poderia ser como validar uma entrada do usuário, exibir dados complexos ou acionar animações.

Vamos agora criar uma diretiva personalizada.

Crie a Diretiva

Use o decorador @Directive para criar uma nova diretiva. Esta diretiva também especifica quaisquer entradas ou saídas.

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '(myCustomDirective)'
})
export class MyCustomDirective {
  @Input  myCustomInput: string;

  constructor  { }
}

Implementar a Diretiva

Um comportamento para a directiva deverá ser definido agora para que a directiva possa ser implementada. O código a seguir usa os serviços ElementRef e Renderer2 para alterar a cor de fundo de um elemento quando a entrada personalizada é alterada.

import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '(myCustomDirective)'
})
export class MyCustomDirective {
  @Input  myCustomInput: string;

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.myCustomInput) {
      const newColor = changes.myCustomInput.currentValue;
      this.renderer.setStyle(this.el.nativeElement, 'background-color', newColor);
    }
  }
}

O método de ciclo de vida ngOnChanges é chamado sempre que a entrada personalizada é alterada.

Adicione a diretiva a um componente

Por fim, adicione a diretiva personalizada ao modelo de um componente usando o seletor especificado no decorador @Directive.

<div myCustomDirective (myCustomInput)="backgroundColor"></div>

Melhores práticas e dicas para vinculação de dados

Estas são algumas das práticas recomendadas mais úteis

• Evite expressões complexas em modelos: use métodos de componente para implementar a lógica necessária para que seu modelo fique limpo, tornando o código mais fácil de entender e depurar.
• Usar canos: use integrado ou personalizado para transformação com base na necessidade do seu aplicativo, para que o modelo seja mais fácil de manter e ler.
• Concentre-se em uma única tarefa: evite adicionar lógica desnecessária para dados aos componentes, mantendo-os simples.

Para melhorar o desempenho do aplicativo:

• Use a estratégia de detecção de alterações OnPush: Isso melhora o desempenho acionando a detecção de alterações quando as propriedades de entrada ou eventos mudam.
• Use trackBy em ngFor: Isso permite que o Angular identifique quais elementos foram alterados em vez de renderizar novamente a lista inteira.
• Use carregamento lento: Carregue apenas os componentes necessários. Isso reduz o tempo de carregamento inicial e melhora a velocidade geral de carregamento do aplicativo.
• Escreva testes unitários: Isso melhora a qualidade do código e reduz bugs no aplicativo.

Se você gostou deste artigo, confira:

• Dominando o roteamento angular: um guia abrangente
• Estrutura angular do projeto: práticas recomendadas para arquivos e pastas
• Injeção de dependência em Angular: um guia abrangente
• Principais bibliotecas e estruturas de componentes de UI Angular
• O que é Angular e por que sua empresa deve considerá-lo para desenvolvimento?
• Os melhores frameworks Javascript da atualidade
• Qual é a melhor estrutura para desenvolvimento web?

Conclusão

A experiência em vinculação de dados em Angular é crucial para o desenvolvimento de aplicações Angular robustas e eficientes. Os desenvolvedores podem melhorar a capacidade de resposta dos aplicativos implementando práticas recomendadas de otimização de desempenho e utilizando vinculação de dados unidirecional e bidirecional de maneira eficaz. A vinculação adequada de dados com componentes personalizados é crucial para evitar armadilhas comuns ao modelar dados.