Criação de Componentes Dinâmicos no Angular: Uma Abordagem Simples

No meu projeto recente, decidi criar uma página semelhante ao Linktree, onde os botões pudessem alterar dinamicamente o conteúdo exibido. A ideia era ter três botões, cada um com um título diferente e direcionando para sites distintos. Para isso, eu queria criar um único componente para os botões, replicá-lo três vezes e personalizar cada um deles com títulos e links específicos.

Neste artigo, vou compartilhar como implementei essa funcionalidade de forma simples e eficiente, sem a necessidade de conceitos avançados como ViewContainerRef ou ComponentFactoryResolver.

O Desafio: Botões Dinâmicos com Títulos e Links Personalizados

O objetivo era criar um componente de botão que pudesse ser reutilizado três vezes, cada um com as seguintes características:

1. Título personalizado: Cada botão exibiria um título diferente, como "LinkedIn", "Youtube" e "Instagram".
2. Link personalizado: Cada botão direcionaria o usuário para um site diferente ao ser clicado.

A solução precisava ser simples, modular e fácil de manter.

Passo a Passo: Criando o Componente de Botão Dinâmico

Passo 1: Criando o Componente de Botão

Primeiro, criei um componente chamado DynamicButtonComponent que seria responsável por renderizar os botões. Esse componente recebe dois parâmetros de entrada (@Input()): o título do botão e o link para onde ele deve direcionar.

typescript

Copy

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

@Component({
selector: 'app-dynamic-button',
template: `
  <a [href]="link" target="_blank">
    <button>{{ title }}</button>
  </a>
`,
styles: [`
  button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
  }
  button:hover {
    background-color: #0056b3;
  }
`]
})
export class DynamicButtonComponent {
@Input() title: string = 'Botão';
@Input() link: string = '#';
}

Explicação do Código:

• @Input() title: string: Recebe o título do botão dinamicamente.
• @Input() link: string: Recebe o link para onde o botão deve direcionar.
• <a [href]="link" target="_blank">: O botão é envolvido por um link (<a>) que redireciona para o site especificado.
• Estilos básicos: Adicionei alguns estilos para deixar o botão mais atraente.

Passo 2: Utilizando o Componente de Botão no Componente Pai

Agora, criei um componente pai chamado LinktreePageComponent que utiliza o DynamicButtonComponent três vezes, cada um com um título e link diferentes.

typescript

Copy

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

@Component({
selector: 'app-linktree-page',
template: `
  <h1>Meu Linktree</h1>
  <app-dynamic-button title="Home" link="https://www.exemplo.com/home"></app-dynamic-button>
  <app-dynamic-button title="Sobre" link="https://www.exemplo.com/sobre"></app-dynamic-button>
  <app-dynamic-button title="Contato" link="https://www.exemplo.com/contato"></app-dynamic-button>
`,
styles: [`
  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  app-dynamic-button {
    display: block;
    margin: 10px auto;
    text-align: center;
  }
`]
})
export class LinktreePageComponent {}

Explicação do Código:

• <app-dynamic-button>: O componente de botão é utilizado três vezes, cada um com um título e link diferentes.
• Estilos básicos: Adicionei alguns estilos para centralizar os botões e melhorar a aparência da página.

Resultado Final

Com essa implementação, o projeto ficou assim:

1. Botão "Home": Exibe o título "LinkedIn" e redireciona para https://www.exemplo.com/home.
2. Botão "Sobre": Exibe o título "Youtube" e redireciona para https://www.exemplo.com/sobre.
3. Botão "Contato": Exibe o título "Instagram" e redireciona para https://www.exemplo.com/contato.

Cada botão é uma instância do mesmo componente (DynamicButtonComponent), mas com propriedades personalizadas. Isso torna o código mais modular, fácil de manter e escalável.

Vantagens dessa Abordagem

1. Reutilização de Componentes: Um único componente de botão é reutilizado três vezes, evitando repetição de código.
2. Personalização Fácil: Cada botão pode ser personalizado com títulos e links diferentes.
3. Simplicidade: Não é necessário usar conceitos avançados como ViewContainerRef ou ComponentFactoryResolver.
4. Manutenção Simplificada: Se precisar alterar o estilo ou comportamento dos botões, basta modificar o componente DynamicButtonComponent.

Conclusão

Criar uma página semelhante ao Linktree no Angular foi um ótimo exercício para praticar a criação de componentes reutilizáveis e dinâmicos. Com essa abordagem simples, consegui implementar três botões personalizados, cada um com um título e link específicos, utilizando um único componente.

Se você está começando com Angular ou precisa implementar funcionalidades semelhantes em seus projetos, essa técnica é uma ótima maneira de começar. Ela é fácil de entender, modular e altamente personalizável.