2

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

saglamcem
  • 677
  • 1
  • 8
  • 15
  • 2
    Are "Project detail x" available as JSON attributes or they are embedded within `description` text? It will be better to make them JSON attributes and they you can use `ng-content` to render those – Wand Maker Jul 21 '18 at 12:02
  • 1
    I think that or you use a ng-content or your description must be a html string, and replace {{description}} by
    in your app-acordeon-item     – Eliseo Jul 21 '18 at 12:38
  • @WandMaker storing the "Project detail x" lines as JSON attributes seems reasonable. Do you suggest I use ng-content for the entire accordion-item text, or just the "project details"? Because the placement of the list items may change in the description, and so rendering the list items in the ng-content may lead to misplaced text – saglamcem Jul 21 '18 at 13:00
  • 1
    If you want to be more flexible with the markup, I would go with @Eliseo's solution. Have a look at this stackblitz: https://stackblitz.com/edit/angular-accordion-item?embed=1&file=src/app/accordion-item/accordion-item.component.html You might need to sanitize the text though. – Kim Kern Jul 21 '18 at 13:26

0 Answers0