Accordion

Collapsible content sections using native <details> / <summary>.

Input	Type	Default	Description
`items`	`NgOatAccordionItem[]`	required	Array of accordion items
`group`	`string`	—	Group name — only one item open at a time

Output	Type	Description
`toggled`	`{ item: NgOatAccordionItem; open: boolean }`	Emitted when an item is toggled

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatAccordion, type NgOatAccordionItem } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatAccordion],
  template: `
    <ng-oat-accordion [items]="items" group="faq" />
  `,
})
export class ExampleComponent {
  items: NgOatAccordionItem[] = [
    { title: 'Question 1', content: 'Answer 1' },
    { title: 'Question 2', content: 'Answer 2' },
  ];
}

Basic Accordion

What is Oat?

A tiny, semantic-first CSS + JS UI library.

What is ng-oat?

An Angular-first integration layer for Oat UI.

Do I need JavaScript?

Only for interactive components (dropdown, tabs, toast). Everything else is pure CSS.

html

<ng-oat-accordion
  [items]="[
    { title: 'What is Oat?', content: 'A tiny CSS + JS UI library.' },
    { title: 'What is ng-oat?', content: 'Angular integration for Oat.' },
    { title: 'Need JS?', content: 'Only for dropdown, tabs, toast.' }
  ]" />

Grouped (Single Open)

What is Oat?

A tiny, semantic-first CSS + JS UI library.

What is ng-oat?

An Angular-first integration layer for Oat UI.

Do I need JavaScript?

Only for interactive components (dropdown, tabs, toast). Everything else is pure CSS.

html

<ng-oat-accordion
  [items]="faqItems"
  group="faq"
  (toggled)="onToggle($event)" />

Pre-opened Item

Getting Started

Install ng-oat via npm and add provideNgOat() to your app config.

Configuration

Use provideNgOatTheme() to customize design tokens.

Troubleshooting

Check the browser console for Oat initialization warnings.

html

<ng-oat-accordion
  [items]="[
    { title: 'Getting Started', content: '...', open: true },
    { title: 'Configuration', content: '...' }
  ]" />