AI coding/AI Short
A

AI Short

按场景分类的 AI 提示词库,复制后即可用于 ChatGPT、Claude 等对话工具。

Angular Directive Generator

This is a ready-to-copy Coding prompt, “Angular Directive Generator”. Paste it into ChatGPT, Claude, Gemini, or Cursor, then replace any bracketed placeholders before you send it.

CodingAwesome Prompts0 copies

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.

More Coding prompts