How would you design this component in Angular 6?

76 Views Asked by At

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

0

There are 0 best solutions below