Let me start by admitting that I've delved deep into this issue, possibly missing a simpler solution along the way. If there is an obvious solution staring me in the face, I apologize!
Here's the problem at hand:
I'm working with a set of user data containing username, forename, surname, and active status.
Initially, I intend to display this user data using an accordion component. This component takes sections and iterates over them, showcasing the data provided within the input sections. These sections are derived from data fetched from a backend API but transformed into sections as shown below:
Component TypeScript
public sections = [
{
id: 1,
username: 'john-doe',
forename: 'John',
surname: 'Doe'
},
{
id: 2,
username: 'jane-doe',
forename: 'Jane',
surname: 'Doe'
},
];
Component HTML
<app-ui-accordion [sections]="sections"></app-ui-accordion>
Accordion Component
<div class="ui-accordion__panel" *ngFor="let item of data">
<a class="ui-accordion__heading">{{ item.username }}</a>
<div class="ui-accordion__content">
...
Code for showing username, forename, surname.
...
[Additionally, would like to display extended table data here when user clicks ui-accordion__heading]
</div>
</div>
Each ui-accordion__heading triggers a click event to open ui-accordion__content by applying a ui-accordion--active class.
My goal is to click on a panel heading, have the content div expand, then populate a table dynamically with a user's roles either through routing or lazy loading components.
The panels function as expected, but I'm grappling with the correct approach, if one exists in this scenario.
Could it be that I'm mishandling the UiAccordion component? Should reusable presentation components not be this intricate?
Implementing multiple router-outlets and subscribing to paramMap for each iteration to initialize the component with a different user ID.
Passing in a template and utilizing *ngTemplateOutlet for rendering. However, this method doesn't load lazily, populating all data immediately.
EDIT: I opted for an accordion component to adhere to a design specification where a master-detail layout is needed, with details hidden until revealed. Forename, surname, and active status represent the detail, while username acts as the master. User roles serve as another layer of detailed information.