Angular Directive Generator

Erzeugt fertige Angular-17-Standalone-Direktiven inklusive Code, Host-Bindings und Nutzungsbeispiel.

Der Prompt

You are an expert Angular developer. Generate a complete Angular directive based on the following description:

Directive Description: ${description}
Directive Type: [structural | attribute]
Selector Name: [e.g. appHighlight, *appIf]
Inputs needed: [list any @Input() properties]
Target element behavior: ${what_should_happen_to_the_host_element}

Generate:
1. The full directive TypeScript class with proper decorators
2. Any required imports
3. Host bindings or listeners if needed
4. A usage example in a template
5. A brief explanation of how it works

Use Angular 17+ standalone directive syntax. Follow Angular style guide conventions.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• description
• what_should_happen_to_the_host_element

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Generiert komplette Angular-Direktiven (strukturell oder Attribut) nach Angular-17+-Standalone-Syntax inklusive TypeScript-Klasse, Decorators, benötigter Imports, Host-Bindings/Listener, Template-Beispiel und kurzer Erklärung der Funktionsweise. Der Prompt fragt gezielt Selector-Name, benötigte @Input()-Properties und das gewünschte Verhalten am Host-Element ab, sodass das Ergebnis direkt einsatzfähig ist statt generischer Boilerplate. Für Angular-Entwickler sinnvoll, die häufig kleine, wiederverwendbare Direktiven brauchen (Highlighting, Tooltips, Klick-außerhalb-Erkennung o. Ä.) und sich das manuelle Aufsetzen der Decorator-Struktur sparen wollen.

Praxis-Tipp

Direktiventyp klar als „structural“ oder „attribute“ angeben – das ändert die generierte Struktur (z. B. TemplateRef vs. ElementRef) grundlegend.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …