Web Components und Custom Elements mit Angular: Framework-unabhängige Integration

Web Components sind eine leistungsstarke Technologie, die es ermöglicht, wiederverwendbare und framework-unabhängige UI-Komponenten zu erstellen. In Kombination mit Angular lassen sich Web Components nahtlos in verschiedene Projekte und Frameworks integrieren. In diesem Artikel zeige ich dir, wie du Custom Elements mit Angular erstellst und in anderen Anwendungen nutzt.

Warum Web Components?

Web Components bestehen aus mehreren Technologien, darunter Custom Elements, Shadow DOM und HTML Templates. Sie bieten mehrere Vorteile:

Framework-Unabhängigkeit: Einmal entwickelt, können sie in React, Vue, Angular oder Vanilla JavaScript genutzt werden.
Wiederverwendbarkeit: Erstellte Komponenten können problemlos in verschiedenen Projekten eingesetzt werden.
Kapselung: Dank Shadow DOM bleiben Styles und Logik isoliert.
Wartbarkeit: Reduzierung von Abhängigkeiten durch die Nutzung nativer Browser-Technologien.

Einrichtung eines Angular-Projekts mit Web Components

Bevor wir starten, stellen wir sicher, dass Angular CLI installiert ist:

npm install -g @angular/cli

Dann erstellen wir eine neue Angular-Anwendung:

ng new angular-web-components --style=css --routing=false
cd angular-web-components

Jetzt fügen wir das Angular Elements-Paket hinzu, das die Erstellung von Custom Elements ermöglicht:

ng add @angular/elements

Erstellen einer Angular Web Component

Erstellen einer neuen Angular-Komponente

Wir generieren eine einfache Angular-Komponente, die später als Web Component genutzt wird:

ng g component custom-button

Bearbeite custom-button.component.ts und füge eine Eingabevariable für den Button-Text hinzu:

import { Component, Input } from ‚@angular/core‘; @Component({ selector: ‚app-custom-button‘, template: `<button>{{ label }}</button>`, styles: [`button { padding: 10px; font-size: 16px; border-radius: 5px; }`] }) export class CustomButtonComponent { @Input() label: string = ‚Click me‘; }

Registrieren als Web Component

Um die Komponente als Custom Element zu registrieren, bearbeiten wir app.module.ts:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { CustomButtonComponent } from './custom-button/custom-button.component';

@NgModule({
  declarations: [CustomButtonComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [],
})

export class AppModule {
  constructor(private injector: Injector) {
    const customButton = createCustomElement(CustomButtonComponent, { injector });
    customElements.define('custom-button', customButton);
 }
 ngDoBootstrap() {}
}

Anpassen der angular.json

Damit die Web Component standalone funktioniert, müssen wir Polyfills für ältere Browser aktivieren. Stelle sicher, dass in angular.json unter „scripts“ folgendes enthalten ist:

"scripts": [
  "node_modules/document-register-element/build/document-register-element.js"
]

Build und Bereitstellung

Jetzt erstellen wir die Web Component als Bundle:

ng build --output-hashing=none

Die generierte Datei dist/angular-web-components/main.js enthält unser Custom Element und kann nun in einer beliebigen HTML-Seite oder einem anderen Framework eingebunden werden.

Nutzung der Web Component in anderen Projekten

Du kannst die Web Component in einer HTML-Seite oder in einem anderen Framework (z. B. React oder Vue) nutzen.

Einbindung in eine einfache HTML-Seite

Erstelle eine Datei index.html und füge den Angular-Build hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Component Demo</title>
  <script src="./main.js"></script>
</head>

<body>
  <custom-button label="Hello Web Components"></custom-button>
</body>

</html>

Nutzung in React

In einer React-Komponente kann die Web Component direkt genutzt werden:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    import('./main.js');
  }, []);

  return <custom-button label="React Button"></custom-button>;
}

export default App;

Nutzung in Vue.js

In einer Vue-Komponente kannst du das Custom Element einfach verwenden:

<template>
  <custom-button label="Vue Button"></custom-button>
</template>

<script>
import "./main.js";
export default {
  name: "App"
};
</script>

Fazit

Mit Angular und Web Components kannst du wiederverwendbare, framework-unabhängige UI-Komponenten erstellen. Dies ist besonders nützlich für große Projekte, die verschiedene Technologien kombinieren oder bestehende Angular-Komponenten in andere Anwendungen integrieren möchten.

Durch die hier gezeigten Schritte kannst du deine eigenen Custom Elements entwickeln und nahtlos in Angular, React, Vue oder jede andere Web-Technologie einbinden.

Viel Erfolg mit Web Components! 🚀