I have a rather basic question concerning proper component design.
I created a basic accordion component, which I'm using to display a title and a description. If the title is clicked, the description is displayed or hidden (toggled).
@Input() title: String;
@Input() description: String;
Currently I'm passing the title and description in the template as props.
<div *ngFor="let project of individualProjects">
<app-accordion-item
[title]="project.title"
[description]="project.description"
[chips]="project.tags">
</app-accordion-item>
</div>
Accordion template
<div class="accordion-description" *ngIf="opened">
{{ description }}
</div>
With this structure, rendering a simple paragraph without any list items or new lines is not a problem.
However, assume an item of the individualProjects array is as follows:
{
title: "Project title",
description: `
The overall project involved the following:
Project detail 1
Project detail 2
Project detail 3
..
Some more text about project`,
tags: ["tag"]
},
...
Some more text here
I'd like to be able to render the "Project detail x" items as list elements, which suggests I need a different structure here. I realize I may encounter many different scenarios concerning this issue, which would require me to update this structure.
Is this a reasonable point to use ng-content? Otherwise, how would you suggest I approach this?
Thank you