How to Create an Accordion Component in Angular Using HTML Content Projection
2 min readJul 29, 2023
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…