German

English

German

English

Theme

Wie man die Buttons und RSVP-Formulare in Angular nutzt ​

Schritt 1: npm Installation ​

Installiere das Paket aus der npm-Registry.

bash
npm install add-to-calendar-button

Schritt 2: Import ​

Importiere das Modul in der Komponente, in welcher du den Button verwenden möchtest.

javascript
import 'add-to-calendar-button';
import 'add-to-calendar-button/styles/all';
import 'add-to-calendar-button/i18n/de';

Schritt 3: Optimiere die Angular-Konfiguration ​

Damit Angular sauber mit Web Components arbeitet, musst du das CUSTOM_ELEMENTS_SCHEMA importieren und den @NgModule/@Component-Block entsprechend aktualisieren.

Für eine Standalone-Komponente:

typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'add-to-calendar-button';
import 'add-to-calendar-button/styles/all';
import 'add-to-calendar-button/i18n/de';

@Component({
  selector: 'app-event-button',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '<add-to-calendar-button prokey="prokey-deines-events"></add-to-calendar-button>',
})
export class EventButtonComponent {}

Bei einer NgModule-Anwendung ergänze das Schema im zuständigen Modul:

typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
//(...)

@NgModule({
  //(...),
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
//(...)

Schritt 4: Loslegen ​

Beginne mit der Nutzung, indem du einen <add-to-calendar-button prokey="prokey-deines-events"></add-to-calendar-button> Tag in deinen Quellcode einfügst.


Bring your own button ​

Alternativ kannst du den Button oder Form auch programmatisch über die atcb_action Funktion auslösen. Beachte, dass hierbei ein Modal erzwungen wird.

Wenn du mit dem npm-Package arbeitest, musst du atcb_action zunächst importieren:

javascript
import { atcb_action } from "add-to-calendar-button";

Du solltest zudem ein HTML-Element als zweiten Paramter angeben. Auch wenn dieser optional ist, optimiert er die UX deiner Nutzer; vor allem bei Navigation über die Tastatur.

Im folgenden Beispiel nutzen wir dieses Element auch als Trigger bei Klick:

javascript
const button = document.getElementById('my-custom-button');
button.addEventListener('click', () => atcb_action({ prokey: "prokey-deines-events"}, button));

Data-Bindings richtig nutzen ​

Um Daten an ein spezifisches Attribut zu binden, musst du die Syntax [attr.PARAMETER]="deine Daten" verwenden.

Je nach Konfiguration könnte der Datenfluss nach dem ersten Rendern des Buttons erfolgen. Das ist kein Problem, aber du könntest Fehler in der Konsole sehen, wenn du im Debug-Modus bist, die behaupten, dass Daten fehlen. Beachte aus diesem Grund, dass das "Binding" der "identifier"-Option nicht funktionieren würde.

javascript
<add-to-calendar-button [attr.prokey]="deineProkeyVariable"></add-to-calendar-button>

Styles und Sprachen ​

Das npm-Paket enthält standardmäßig nur den Standard-Style und Englisch. Das Beispiel kombiniert add-to-calendar-button/styles/all mit add-to-calendar-button/i18n/de, was gültig ist: Nutze add-to-calendar-button/styles/3d bei einem festen Style oder add-to-calendar-button/styles/all, wenn die remote verwaltete PRO-Konfiguration ihn ohne Deployment ändern kann. Importiere standardmäßig die konkrete Sprache oder eine kleine bekannte Menge, etwa add-to-calendar-button/i18n/de; nutze add-to-calendar-button/i18n/all nur, wenn Sprachen zur Laufzeit wirklich unvorhersehbar wechseln können. Beide /all-Imports vergrößern das Bundle, weil sie alle jeweiligen Dateien enthalten.

Alternativ kannst du Styles und Sprachen dynamisch von jsDelivr laden, indem du style-source="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3/dist/styles/" am Element setzt. Dieselbe Strategie gilt für eigene Trigger; in atcb_action heißt die Option styleSource.