Prompt Template

Angular Directive Generator

Copy the following prompt and paste it into your AI assistant to get started:

AI 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.
Try Prompt

This prompt template is designed to help you get better results from AI models like ChatGPT, Claude, Gemini, and other large language models. Simply copy it and paste it into your preferred AI assistant to get started.

Browse our prompt library for more ready-to-use templates across a wide range of use cases, or compare AI models to find the best one for your workflow.