コーディング
Angularディレクティブジェネレーター
Angular Directive Generator
- テスト済みモデル:
- GPT-4o
- 有効性スコア:
- 90/100
- プロンプトアーカイブ
日本語バージョン
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.値を入れて実行
このプロンプトには5か所の空欄があります。入力すると完成版を組み立てます。
残り5か所
完成したプロンプト
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.- ChatGPTで開く （新しいタブで開きます）
- Claudeで開く （新しいタブで開きます）
- Geminiで開く （新しいタブで開きます）
Geminiはリンクでプロンプトを渡せないため、先にコピーしてください。
- Perplexityで開く （新しいタブで開きます）
新しいタブが開き、プロンプトが入力済みの状態になります。ログインが必要な場合があります。
このプロンプトの使い方
- 角かっこで囲まれた部分を自分の内容に置き換えてから送信してください。
- モデルによって結果は変わります。期待した出力でなければ、別のモデルを試すか、具体例を1つ追加してください。
- プロンプトは1つのメッセージにまとめて送ってください。分割すると指示が弱まります。