Coding
Angular Directive Generator
- Tested with:
- GPT-4o
- Effectiveness:
- 90/100
- Prompt archive
English version
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.Fill in and run
This prompt has 5 blanks. Fill them in and we will assemble the finished prompt for you.
5 still empty
Finished 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.- Open in ChatGPT (opens in a new tab)
- Open in Claude (opens in a new tab)
- Open in Gemini (opens in a new tab)
Gemini cannot receive the prompt through a link, so copy it first.
- Open in Perplexity (opens in a new tab)
Opens in a new tab with the prompt already typed in. You may need to be signed in.
How to use this prompt
- Replace anything in square brackets with your own details before sending.
- Results differ between models. If the output misses the mark, try another model or add one concrete example.
- Keep the prompt in one message. Splitting it across turns weakens the instructions.