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

Erzeugt aus einer Beschreibung, dem Direktiv-Typ (structural/attribute), Selector-Namen und benötigten @Input()-Properties eine vollständige Angular-17-Standalone-Direktive: TypeScript-Klasse mit Decorators, nötige Imports, Host-Bindings bzw. Listener, ein Template-Anwendungsbeispiel und eine kurze Erklärung der Funktionsweise. Der Vorteil gegenüber generischen Code-Anfragen ist die feste Struktur, die konsistente, Style-Guide-konforme Ausgaben erzwingt statt unvollständiger Snippets. Lohnt sich für Angular-Entwickler, die mit Standalone-Komponenten arbeiten und wiederkehrende DOM-Logik (Hover-Effekte, Klick-Handling, Validierung) schnell als sauberen Boilerplate-Code brauchen. Für ältere NgModule-Projekte ohne Standalone-Syntax weniger passend.

Praxis-Tipp

Konkret ausfüllen, z. B. “Directive Description: Text beim Hover hervorheben, Type: attribute, Selector: appHighlight, Inputs: highlightColor” – den generierten Code direkt in eine eigene .directive.ts-Datei übernehmen.

Siehe auch

• Architect Guide for Programmers
• Bug Discovery Code Assistant

Lizenz & Quelle

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

Lade …