Currently, I am working on an Ionic 3 application and found the need for an accordion component similar to NgBootstrap's. Unfortunately, the Ionic framework does not offer such a component. This led me to take on the challenge of creating one myself, allowing me to further explore Angular 5 in the process.
To provide some context for my query, my custom accordion component is structured within the following file tree:
components/
my-accordion/
my-accordion.component.html
my-accordion.component.css
my-accordion.component.ts
my-accordion.service.ts
In order for my accordion to function as intended, I require a specific service that facilitates communication between all instances of the component. When one item within the accordion is opened, I want the others to automatically close, ensuring only one item is displayed at a time. Leveraging the RxJS library has proven effective for achieving this interaction.
It's worth noting that the proper functionality of my accordion hinges on both the Component and Service working in tandem. Without the service, the accordion will not perform optimally. My goal is to package this accordion into a module that can be shared across different applications for versatile reuse.
My initial instinct was to place the accordion in the SharedModule, but according to the ngModules FAQs:
The SharedModule should not have providers for reasons explained previously. Nor should any of its imported or re-exported NgModules have providers.
Faced with this restriction, I considered incorporating the accordion into the CoreModule. However, the documentation explicitly states:
Consider making CoreModule a pure services module with no declarations.
Given these constraints, my question arises: Where should I house a component AND its associated service (for inter-component communication) to ensure seamless reusability across various Ionic/Angular applications?