Component Responsibilities

1. AccordionComponent:

   • Purpose: Displays data in an accordion format, allowing sections to expand and collapse when clicked.
   • Inputs:
     • accordionData: Array containing the data for each accordion item (questions and answers).
     • accordionUniqueIdName: Unique identifier for each accordion section to manage state and interactions.
   • Functionality:
     • Iterates over accordionData to generate accordion items.
     • Manages the expand/collapse state of each item using the triggerAccordion() method, which toggles CSS classes and attributes to show or hide content.

2. CaasContentService:

   • Purpose: Fetches data from an external API.
   • Functionality:
     • Provides the getCaasContentData() method that takes a request type and makes an HTTP GET request to the API.
     • Handles errors using the errorHandler() method and returns an observable containing the API response.
   • Reusability: Can be injected into any component needing to fetch content data, making it versatile for various data fetching needs within the application.

3. AccountInquiryFaqComponent:

   • Purpose: Manages the display of account inquiry FAQs using the AccordionComponent.
   • Functionality:
     • On initialization, calls the getAccordion() method to fetch FAQ data using the CaasContentService.
     • Sets the fetched data to accordionData if the API call is successful, otherwise handles errors by setting isSuccess to false and storing an error message.
     • Uses the *ngFor directive to iterate over accordionData and dynamically create instances of AccordionComponent for each FAQ block.

Workflow

1. Initialization:

   • When the AccountInquiryFaqComponent is initialized (ngOnInit), it calls the getAccordion() method.

2. Data Fetching:

   • The getAccordion() method in AccountInquiryFaqComponent calls CaasContentService.getCaasContentData('adb_getAccountInquiryFaq').
   • CaasContentService makes an HTTP GET request to the API endpoint with the request type adb_getAccountInquiryFaq.
   • The service handles the API response:
     • If successful, it returns the data which is assigned to accordionData.
     • If an error occurs, it logs the error and sets isSuccess to false.

3. Data Binding:

   • With accordionData populated, the template of AccountInquiryFaqComponent uses *ngFor to iterate over accordionData.td_accordion_blocks.
   • For each block, it dynamically creates an instance of AccordionComponent, passing the relevant data and a unique identifier.

4. Displaying FAQs:

   • Each AccordionComponent receives its specific data (td_accordion_question_answer_block) and a unique ID.
   • The AccordionComponent template displays the FAQ questions, and its triggerAccordion() method manages the expand/collapse functionality when a question is clicked.

5. Reusable Components:

   • AccordionComponent: By providing the necessary data and a unique identifier, the AccordionComponent can be reused in any other part of the application needing an accordion-style display.
   • CaasContentService: The service can be utilized by other components to fetch different types of content by passing appropriate request types to the getCaasContentData() method.

This workflow ensures that the components are modular, reusable, and efficiently handle data fetching and display logic, making the application easy to maintain and extend.