How to Create an Accordion Component in Angular Using HTML Content Projection

Modern web applications often use the accordion component to elegantly display large amounts of content in a compact, collapsible manner. Today, we’ll walk through creating an accordion component in Angular that lets you define content directly via HTML.

1. Setting Up the Angular Project

If you haven’t initialized an Angular project yet, do so with the Angular CLI:t

ng new angular-accordion
cd angular-accordion

2. Creating the Accordion and Accordion Item Components

Generate both components:

ng generate component accordion
ng generate component accordion-item

3. Structuring the Accordion Components

Our design splits the accordion into two components: accordion for the entire structure and accordion-item for individual collapsible items.

Accordion Item Component

accordion-item.component.html

<div class="accordion-header" (click)="toggle()">
    <ng-content select="[accordion-title]"></ng-content>
</div>
<div class="accordion-content" [ngClass]="{'open': isOpen}">
    <ng-content select="[accordion-content]"></ng-content>
</div>

accordion-item.component.ts

import { Component } from '@angular/core';

@Component({
  selector…