Feature/accordion

[elhakimdev]

Description

This pull request introduces the functionality to access and manage custom directives applied to host elements, including nested child components, within an Angular project. The purpose is to allow components like AccordionComponent and AccordionItemComponent to detect and interact with the AccordionSelfDirective applied on both the host element and its child components. This improves the flexibility of the component structure, allowing each level of nesting to have customized logic and behavior while accessing directives.

Why is this change necessary?

Previously, there was limited access to directives applied to nested components, which hindered the ability to dynamically adjust behavior for each level of nesting. By providing access to directives in both parent and child components, the application can support more complex and nested component structures where each component can independently interact with its directives.

How does this change improve the project?

This change:

• Provides more flexible and reusable components by enabling access to directives in both the parent and nested child components.
• Allows dynamic behavior adjustments for both AccordionComponent and AccordionItemComponent based on the applied directives.
• Improves the modularity of the codebase by making it easier to add and manage directive logic across nested components.

Related Issue(s)

• Closes #123 (or relevant issue number if applicable).
• Addresses the need for dynamic directive access in deeply nested components.

Changes

• Introduced @ContentChildren to query for the AccordionSelfDirective in both AccordionComponent and AccordionItemComponent.
• Implemented handling for nested content to dynamically access directives across multiple levels of nesting.
• Updated AccordionComponent and AccordionItemComponent to properly interact with the directives applied to both parent and nested child components.

How to Test

To verify the changes:

1. Ensure that the AccordionComponent and AccordionItemComponent both include the AccordionSelfDirective in their templates.
2. Test the following scenarios:
   • Apply AccordionSelfDirective to the AccordionComponent and ensure it's detected.
   • Apply AccordionSelfDirective to nested AccordionItemComponent and confirm it's detected within the parent AccordionComponent.
   • Verify that the AccordionComponent can access directives applied on AccordionItemComponent and vice versa.
3. Verify the console logs or behavior changes when the directive is applied in both parent and child components.
4. Test edge cases with multiple nested AccordionItemComponent instances to ensure all directives are correctly queried.

Screenshots (if applicable)

No UI changes were made in this update.

Checklist

• I have read the contributing guidelines.
• I have followed the code style and conventions of the project.
• My changes have been tested, and unit tests (if applicable) have been added/updated.
• I have updated the documentation as needed.
• I have tested my changes on multiple browsers/devices (if applicable).
• This PR does not include any breaking changes (if it does, please list them).

Additional Notes

• This change ensures that the @ContentChildren decorator works as expected across multiple levels of nested content projection.
• No breaking changes are expected in the public API of AccordionComponent or AccordionItemComponent.