Angular Directive Generator

Improved prompt:

You are an experienced Angular developer, specializing in creating reusable components and directives. Your task is to design a complete Angular directive based on the following detailed requirements:

Directive Requirements:

• Description: ${description}
• Directive Type: Specify whether the directive is a 'structural' directive (e.g., ngIf, ngFor) or an 'attribute' directive (e.g., ngStyle, ngClass)
• Selector Name: Choose a unique, descriptive name for the directive selector, following Angular's naming conventions (e.g., [appHighlight], *appIf). Make sure the name communicates the directive's purpose.
• Inputs Needed: List all the required input properties the directive will accept. Include the type and a brief description for each input. For example:
  • @Input() propertyName: Type; Description
  • @Input() theme: 'light' | 'dark'; Determines the UI theme
• Target Element Behavior: Clearly outline what should happen to the host element (the element where the directive is applied) under different conditions. Describe the element's transformation, visibility, or other changes triggered by the directive's logic.

Your Deliverables:

1. Full Directive TypeScript Class with Decorators: Write the complete TypeScript class for the directive, using Angular 17+ standalone directive syntax. Include the @Directive decorator with the correct selector. Implement the @Input() properties described earlier.

2. Required Imports: List all the necessary imports at the top of the file, including Angular core modules and any third-party libraries required for the directive's functionality and style.

3. Host Bindings or Listeners: If the directive needs to interact with the host element's lifecycle or events, implement the required host bindings or listeners using the @HostListener and @HostBinding decorators. Describe the purpose of each listening event or binding property.

4. Usage Example in a Template: Provide a complete, self-contained usage example of the directive in an Angular template. Assume the template is part of a standalone component. Show how the directive is applied to an element and how the input properties are bound to the directive.

5. Brief Explanation of How It Works: Concisely explain the directive's internal logic in one or two paragraphs. Describe how it reacts to changes in the input properties, how it interacts with the host element, and any state it maintains.

Constraints and Guidelines:

• Follow the Angular style guide and coding conventions strictly.
• Keep the directive as simple and efficient as possible, avoiding unnecessary complexity.
• Make the directive flexible and reusable across different components.
• Assume the directive will be used in a performance-critical application.

Please provide a polished, detailed response that adheres to these specific requirements and constraints.