코딩
앵귤러 디렉티브 생성기
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에서 열기 (새 탭에서 열림)
새 탭이 열리고 프롬프트가 미리 입력됩니다. 서비스에 로그인되어 있어야 할 수 있습니다.
이 프롬프트 사용법
- 대괄호로 표시된 부분을 여러분의 내용으로 바꿔서 입력하세요.
- 모델에 따라 결과가 달라집니다. 원하는 답이 아니면 다른 모델을 쓰거나 구체적인 예시를 하나 덧붙이세요.
- 프롬프트는 한 번에 하나의 메시지로 보내세요. 여러 번에 나누면 지시가 약해집니다.