---
title: "Discussion on \"A simple but customizable accordion component in Angular\" | Hashnode"
description: "Discussion on \"A simple but customizable accordion component in Angular\". How to create a super simple accordion component in Angular. Using the power of content projection in Angular, we are going to build an accordion/expansion panel that can be customized in multiple ways.\nAccordions\nAccordions in general are vertically..."
url: "https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [A simple but customizable accordion component in Angular](https://sreyaj.dev/customizable-accordion-component-angular?utm_source=hashnode&utm_medium=feed)

How to create a super simple accordion component in Angular. Using the power of content projection in Angular, we are going to build an accordion/expansion panel that can be customized in multiple ways. Accordions Accordions in general are vertically...

Jun 12, 2021 · 8 min read · sreyaj.dev  
Updated Dec 14, 2021  
Read the article

-   [#angularjs](https://hashnode.com/tag/angularjs)
-   [#angular-2](https://hashnode.com/tag/angular-2)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#typescript](https://hashnode.com/tag/typescript)
-   [#web-development](https://hashnode.com/tag/web-development)

## Written by

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

@adisreyaj · Kerala, IN

  
[View profile](https://hashnode.com/@adisreyaj)

Full stack dev ✨

Full stack web developer with main focus in Angular and NodeJs. Loves creating blogs, a side projects when I can find time.

## Responses 7

Markdown supported · ⌘↵ to post

[Scott Warner](https://hashnode.com/@swarner)

[Dec 25, 2024](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/676c67f3348a1c4748c86e53)

Thanks, this is a very useful bit of code. I was not able to get it working with ngFor to populate items. If it should work is there a sample?

[mariane habdichlieb](https://hashnode.com/@mariane)

[Feb 15, 2023](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/63ecf62b3fa8ff4ff009775d)

is it possible to be an accordion item expanded when the component is shown?

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Feb 22, 2023](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/63ecf62b3fa8ff4ff009775d#reply-63f6579e437bc8d091bd0c41)

Can you rephrase your question? I don't quite follow.

[Leonardo](https://hashnode.com/@Leonardonline)

[Feb 27, 2023](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/63ecf62b3fa8ff4ff009775d#reply-63fd31385b969e24bab6e597)

[Adithya Sreyaj](https://hashnode.com/@adisreyaj) looks like asking for initially open items.

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Feb 28, 2023](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/63ecf62b3fa8ff4ff009775d#reply-63fdbb42c72bc5248ac263ad)

I've update the code to add support for initial expand conditions:

```
merge(this.items.changes, of(this.items))
      .pipe(map(() => this.items.toArray()))
      .subscribe((items) => {
        items.forEach((item, index) => {
          if (item.expanded) {
            this.expanded.add(index);
          }
        });
        this.cdr.detectChanges();
      });
```

[Joshua Berrios](https://hashnode.com/@JBerrios)

[Aug 31, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/630fb0d156df9e8e5025a0f0)

Great Tutorial.

The only problem I am having is that my application is not loading and stays in a white screen because of the following error in the console log. I am importing it correctly into the app.module.ts file.

This is the error I am getting. ![Type AccordionModule does not have emod property.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661972672754/De_J2Eb_h.png)

[Kirti](https://hashnode.com/@Kirtimtl)

[Mar 17, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/6233203219ea0219c94b20f6)

Loved the document, i used it and its working so nicely, meeting all the defined requirements

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Mar 17, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/6233203219ea0219c94b20f6#reply-62333458bef4c71aa6f0c7c8)

Glad it helped 💫

[Cognity One](https://hashnode.com/@JADev)

[Feb 16, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/620cf5d225673f2740eea20a)

Hi there

Great article, helped me understand accordion's better!!

One question, how can you add a "hat" to the accordion as per the image?

![Screenshot 2022-02-16 145947.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645016423461/Ra2SlE-bx.png)

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Feb 16, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/620cf5d225673f2740eea20a#reply-620d571525673f2740eeabcf)

Thanks! Glad you found it helpful.

I am not sure If I understand what you meant. Can you rephrase it?

[sahar omidi](https://hashnode.com/@sahar93)

[Feb 14, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/6209fa127ee57a17fb59aeff)

Great I used this and enjoyed it

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Feb 14, 2022](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/6209fa127ee57a17fb59aeff#reply-620a55d0dcdf3321c2e02787)

Glad you found it useful!

[Suraj Kumar](https://hashnode.com/@kumarsuraj)

[Jun 27, 2021](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/60d7e27ade92ef110afde87f)

Super Informative and I just the loved your explanation. waiting for more angular related articles.

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Jun 27, 2021](https://hashnode.com/posts/customizable-accordion-component-angular/60c451bea25fa357af8409d9/comment/60d7e27ade92ef110afde87f#reply-60d80fbecb0aa8118c23c2c1)

Thanks Suraj, appreciate the feedback!