ng-expand-group

ng-expand-group is a standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible accordion of expandable items. It is also fully compatible with SSR, CSR and prerender.

If you want to install the latest version (currently 20):

    npm install ng-expand-group
  

Angular 19:

    npm install ng-expand-group@v19-lts
  

Angular 18:

    npm install ng-expand-group@v18-lts
  

ng-expand-group requires the ng-expand component from our library. However, you don't need to install anything, as ng-expand is automatically installed with ng-expand-group.

Using ng-expand-group is easy:

• Define the accordion items you need using ng-expand as children of the component.
• If needed, you can use the (expandedItem) output to get the index of the current expanded item.
• Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:

    @Component({
  selector: 'app',
  standalone: true,
  imports: [ NgExpand, NgExpandGroup ],
  template: `
    <ng-expand-group (expandedItem)="expandedItemSignal.set($event)>
      <ng-expand label="Expand button label 1">
        <p>This is the content 1</p>
      </ng-expand>
      <ng-expand label="Expand button label 2">
        <p>This is the content 2</p>
      </ng-expand>
    </ng-expand-group>
  `,
})
export class App {
  expandedItemSignal = signal<number | null>(null);
}
  

As you can see in the example bellow, you simply have to add as ng-expand items you need as children of ng-expand-group.

If needed, you can get the index of the current expanded item through the output (expandedItem). If a ng-expand item is expanded, you will get its index (number). If there is no item expanded, you will get null.

Here is a list of all input/ouput:

Functionality Outpus

YYou can easily customize the component’s appearance using CSS. There is only one CSS variable that will help you to set up the gap between each item (--expand-group-gap)

    ng-expand-group {
  padding: 10px 20px;
  --expand-group-gap: 1rem;
}
  

This component is fully accessible. All functional accessibility features are already built in.

Keep in mind that you are responsible for configuring the accessibility of any content you place inside the ng-expand components.