Directives

Overview

Directives provide specialized functionality that can be applied to HTML elements or Angular components. They are a fundamental part of the Angular ecosystem that allow you to extend the behavior of existing HTML elements.

Available Directives

Key Features

• Integration with the Responsive System: Directives are designed to work with the Responsive System, allowing widgets to adapt to different screen sizes.
• Use of Signals: Implemented using Angular signals for optimal performance.
• OnPush Change Detection: Optimized to minimize impact on performance.
• Consistent APIs: Uniform and predictable interfaces for ease of use.

Implementation

Directives can be implemented in standalone components using the imports property:

import { ResponsiveWidgetPropsDirective } from '@widgets-editor/shared-ui';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [
    // Other imports...
    ResponsiveWidgetPropsDirective
  ],
  template: `
    <div libResponsiveWidgetProps [widget]="widget" [activeBreakpoint]="activeBreakpoint">
      <!-- Component content -->
    </div>
  `
})
export class MyComponent {
  // Component code...
}

Best Practices

• Composition: Combine directives to build complex functionality without cluttering your component code.
• Single Responsibility: Each directive should focus on one specific aspect of functionality.
• Reusability: Design directives to be reusable across different components.
• Performance: Consider using OnPush change detection and optimizing event handling for better performance.

Migration Guide

The ResponsiveDraggable directive has been moved to the Widgets section for better organization and context. Please update your references to:

/widgets/responsive-draggable/