Carregando agora
Front-end , , , , , ,

Guia Completo: Criação, Importação e Exportação de Web Components com Angular 17

Introdução

Se você está no mundo do desenvolvimento frontend, já deve ter ouvido falar sobre Web Components. Essas belezuras são uma solução incrível para criar componentes reutilizáveis de maneira independente de framework. Neste artigo, vou mostrar, de maneira descontraída e com muito código (porque quem não gosta de exemplos?), como criar, importar e exportar Web Components usando o Angular 17.

Vamos nessa? Aperte os cintos e bora codar!

O que são Web Components?

Antes de mergulharmos no Angular, vale entender o conceito de Web Components.

Eles são um conjunto de APIs nativas do navegador que permitem criar componentes customizados reutilizáveis. Web Components são baseados em quatro pilares:

  1. Custom Elements: Permite criar novas tags HTML.
  2. Shadow DOM: Encapsula o estilo e a estrutura do componente.
  3. HTML Templates: Define o layout reutilizável.
  4. ES Modules: Módulos JavaScript para distribuição de componentes.

Angular facilita a criação de Web Components através do Angular Elements. Bora ver como isso funciona!

Criação de Web Components com Angular 17

Passo 1: Criando o projeto Angular

Se ainda não tem um projeto Angular configurado, abra o terminal e rode:

ng new meu-webcomponent-angular

Escolha as opções desejadas (como CSS ou SCSS) e entre na pasta do projeto:

cd meu-webcomponent-angular

Passo 2: Instalando o Angular Elements

O Angular Elements é o pacotinho mágico que nos ajuda a criar Web Components com Angular. Instale-o com o seguinte comando:

npm install @angular/elements --save

Passo 3: Criando um Componente Angular

Crie um componente simples usando o CLI do Angular:

ng generate component meu-componente

Modifique o template do componente criado:

<!-- meu-componente.component.html -->
<div class="meu-componente">
  <h2>Oi! Eu sou um Web Component em Angular 17!</h2>
  <p>Nome: {{ nome }}</p>
</div>

E no arquivo TypeScript, adicione uma propriedade nome:

// meu-componente.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html',
  styleUrls: ['./meu-componente.component.css']
})
export class MeuComponenteComponent {
  @Input() nome: string = 'Web Components';
}

Passo 4: Transformando em Web Component

Para converter o componente Angular em um Web Component, edite o app.module.ts:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { MeuComponenteComponent } from './meu-componente/meu-componente.component';

@NgModule({
  declarations: [MeuComponenteComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [],
  entryComponents: [MeuComponenteComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const elemento = createCustomElement(MeuComponenteComponent, { injector });
    customElements.define('meu-webcomponent', elemento);
  }

  ngDoBootstrap() {}
}

Aqui:

  • createCustomElement transforma o componente Angular em um Web Component.
  • customElements.define registra o Web Component no navegador com a tag meu-webcomponent.

Passo 5: Gerando o Bundle

Para gerar o Web Component como um bundle simples, ajuste o arquivo angular.json:

"outputPath": "dist/meu-webcomponent-angular"

E rode o build do Angular:

ng build --prod

Pronto! Seu Web Component está em dist/meu-webcomponent-angular.

Maninho, talvez você curta?

Importação de Web Components no Angular

Agora que temos um Web Component pronto, vamos aprender a usá-lo em um projeto Angular.

Passo 1: Adicionando o Bundle

Inclua o script gerado em index.html do projeto Angular:

<script src="assets/meu-webcomponent.js"></script>

Passo 2: Usando o Web Component

Você pode usar o Web Component como uma tag normal em qualquer template:

<meu-webcomponent nome="Angular 17"></meu-webcomponent>

Pronto! Seu Web Component está rodando no Angular sem problemas.

Exportação de Web Components

Se você deseja usar o Web Component em outros frameworks (React, Vue, etc.) ou mesmo como tag HTML simples, basta:

  1. Distribuir o arquivo meu-webcomponent.js gerado no build.
  2. Incluir o script no HTML ou no projeto de destino.

Por exemplo, em um HTML puro:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Web Component</title>
  <script src="meu-webcomponent.js"></script>
</head>
<body>
  <meu-webcomponent nome="Web Components com Angular"></meu-webcomponent>
</body>
</html>

Conclusão

Criar Web Components com Angular 17 é simples, não é? Usando o Angular Elements, você pode transformar qualquer componente Angular em um Web Component reutilizável, independente do framework.

O bacana é que isso abre portas para usar os mesmos componentes em projetos Angular, React, Vue ou até mesmo HTML puro!

Se gostou do tutorial, compartilha com a galera! Qualquer dúvida, é só deixar nos comentários. Bora codar e até o próximo post! ✌️

Angular performance Angular Signals Apps Multiplataforma automação de tarefas Backend Boas Práticas boas práticas Git controle de versão desenvolvedores desenvolvimento backend Desenvolvimento de Software Desenvolvimento Frontend Desenvolvimento Mobile Desenvolvimento Web desenvolvimento ágil devops dicas para devs escalabilidade ferramentas de Git ferramentas de programação Front-end Git Hooks integração contínua inteligência artificial JavaScript Linguagens de Programação Media Queries mercado de tecnologia Mercado de Trabalho Tech Node.js produtividade dev Programação Programação Orientada a Objetos programação para iniciantes programação reativa Python React React Suspense Rust Tecnologia Trunk-Based Development web development workflow Git workflows Git

Tag

Related Posts

Publicar comentário

O que temos aqui?