프롬프트 도감 › No.2166
Angular 디렉티브 만들기
Angular Directive Generator
원하는 동작을 적으면 Angular 디렉티브 코드와 필요한 import, 사용 예시, 짧은 설명까지 한 번에 만들어 줘요. Angular 17 이상 방식으로 나와요.
이럴 때 Angular 반복 코드 줄이기, 하이라이트 같은 작은 기능 만들기, 디렉티브 공부
도구 ChatGPT · Claude · Gemini
프롬프트
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.팁
- description 자리에 원하는 동작을 구체적으로 적어요
- 구조형·속성형 중 하나만 골라 남겨요
출처
권리: CC0 (f/prompts.chat). 자유 사용. 기여자: [email protected].