Skip to main content
Prompts Angular Standalone Directive Generator

developer coding template risk: low

Angular Standalone Directive Generator

The prompt instructs the model to act as an expert Angular developer and generate a complete Angular 17+ standalone directive based on a provided description, directive type, selec…

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.

INPUTS

description REQUIRED

Directive Description

directive_type REQUIRED

Directive Type: structural or attribute

e.g. structural

selector_name REQUIRED

Selector Name e.g. appHighlight or *appIf

e.g. appHighlight

inputs_needed

List any @Input() properties

target_element_behavior REQUIRED

What should happen to the host element

REQUIRED CONTEXT

  • directive description
  • directive type
  • selector name
  • inputs needed
  • target element behavior

ROLES & RULES

Role assignments

  • You are an expert Angular developer.
  1. Use Angular 17+ standalone directive syntax.
  2. Follow Angular style guide conventions.

EXPECTED OUTPUT

Format
markdown
Schema
numbered_list · The full directive TypeScript class with proper decorators, Any required imports, Host bindings or listeners if needed, A usage example in a template, A brief explanation of how it works
Constraints
  • full directive TypeScript class with proper decorators
  • required imports
  • host bindings or listeners if needed
  • usage example in a template
  • brief explanation of how it works
  • use Angular 17+ standalone directive syntax
  • follow Angular style guide conventions

SUCCESS CRITERIA

  • Generate complete Angular directive based on description
  • Include full TypeScript class with decorators
  • Provide required imports
  • Include host bindings or listeners if needed
  • Provide usage example in template
  • Provide brief explanation
  • Use Angular 17+ standalone syntax
  • Follow Angular style guide conventions

FAILURE MODES

  • Using outdated Angular syntax pre-17
  • Not using standalone directive syntax
  • Incorrect selector or decorator usage
  • Missing necessary @Input properties
  • Invalid host bindings or listeners
  • Usage example not matching directive behavior
  • Violating Angular style guide

CAVEATS

Dependencies
  • 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}
Missing context
  • Examples of how to fill placeholders for common use cases

QUALITY

OVERALL
0.95
CLARITY
0.95
SPECIFICITY
0.95
REUSABILITY
1.00
COMPLETENESS
0.90

IMPROVEMENT SUGGESTIONS

  • Standardize placeholder syntax to use ${} consistently throughout (e.g., change bracketed lists to ${directiveType})
  • Add a section for optional outputs or events if applicable
  • Include a note on error handling or edge cases in the explanation

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER