Collapsible for Angular

import { AuiCollapsible } from '@absoluteui/angular/collapsible';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Collapsible page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { collapsible: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { CollapsibleChangeDetail } from '@absoluteui/components/collapsible';
import { AuiCollapsible } from '@absoluteui/angular/collapsible';

@Component({
  selector: 'app-delivery-help',
  imports: [AuiCollapsible],
  template: `<aui-collapsible label="How is the delivery date calculated?" [content]="help" [open]="open" (changed)="onToggle($event)"></aui-collapsible>`,
})
export class DeliveryHelpComponent {
  open = false;
  readonly help = 'Orders placed before 14:00 on a business day ship the same day.';

  onToggle(detail: CollapsibleChangeDetail): void {
    this.open = detail.open;
  }
}

<aui-collapsible>

Class AuiCollapsible; template reference #ref="auiCollapsible".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Trigger text.
content	string | Node		Required. Region content; strings are rendered as text.
open	boolean	false	Initial state; with update(), sets the state.
disabled	boolean	false	Blocks toggling (aria-disabled; the trigger stays focusable).
headingLevel	CollapsibleHeadingLevel | null		Wrap the trigger in a heading of this level.
variant	CollapsibleVariant	'plain'	plain: text trigger; bordered: full-width trigger in a bordered surface.
icons	Partial<CollapsibleIcons>		Icon slot overrides.

Outputs

Output	Payload	Description
(changed)	CollapsibleChangeDetail	The user toggled the content: { open }. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
show(): void	Show the content (no event).
hide(): void	Hide the content (no event).
toggle(): void	Toggle the content (no event).