ng-expand

ng-expand 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 expandable item. It is also fully compatible with SSR, CSR and prerender.

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

    npm install ng-expand
  

Angular 19:

    npm install ng-expand@v19-lts
  

Angular 18:

    npm install ng-expand@v18-lts
  

Using ng-expand is easy:

• Define the expansor button label using the label input.
• Set expandable content as children of the component.
• Configure it using inputs.
• Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:

    import { Component, signal } from '@angular/core';
import { NgExpand } from 'ng-expand';

@Component({
  selector: 'app',
  standalone: true,
  imports: [ NgExpand ],
  template: `
    <ng-expand
      label="Expand button label"
      [startExpanded]="false"
      iconType="plus"
    >
      <p>This is the content</p>
    </ng-expand>
  `,
})
export class App {}
  

As you can see in the example bellow, you can use the label input to assign text to the expand/collapse button.

You can also use startExpanded input to decide the initial state and iconType input to choose between two different icon types (arrow or plus).

Here is a list of all input/ouput:

Functionality Inputs

Style & Behavior Inputs

Accessibility Inputs

You can easily customize the component’s appearance using the CSS variables listed below.

    ng-expand {
  --expand-bg: orange;
  --expand-icon-size: 1.1rem;
}
  

General

Expand button

Expandable content

Styling considerations:

If you have multiple expand items and need different custom styles, you can add a class to target them more precisely:

    ng-expand.myClass {
  --expand-bg: blue;
}
  

Variable inheritance

The component uses a cascading system of CSS variables where some are general and others are more specific. Setting a general variable like --expand-bg or --expand-color applies the value to the entire component (both button and content).

However, specific variables such as --expand-button-bg or --expand-button-color override the general ones for their respective parts.

In short: General variables apply to the whole component, while specific variables take priority in their own area.

This component is fully accessible. All functional accessibility features are already built in. The only input you can configure is [tabIndex], in case you need to remove the component from the tab flow for any reason.

Keep in mind that you are responsible for configuring the accessibility of any content you place inside the component.