modus-angular-accordion-state-management

Modus Accordion State Management in Angular

IMPORTANT: Accordion State Management Guidelines

Key Principle: Modus Web Components (modus-wc-accordion, modus-wc-collapse) are designed to manage their own state, but they DO support controlled state when needed.

Best Practice: Use the expanded attribute on modus-wc-collapse components for initial state or programmatic control, but avoid trying to synchronize Angular state with Modus state in real-time.

Common Anti-Patterns

Real-time State Synchronization

// WRONG: Trying to sync Angular state with Modus state in real-time
@Component({
  template: `
    <modus-accordion
      (expandedChange)="onExpandedChange($event)"
    >
      <modus-collapse
        [expanded]="isExpanded()"  <!-- Creates state loop -->
      >
        <div slot="content">Content</div>
      </modus-collapse>
    </modus-accordion>
  `,
})
export class AccordionComponent {
  readonly isExpanded = signal(false);

  onExpandedChange(event: CustomEvent): void {
    this.isExpanded.set(event.detail.expanded); // Creates conflicts
  }
}

Complex State Synchronization

// WRONG: Complex state synchronization that can cause loops
@Component({
  template: `
    @for (item of items(); track item.id) {
      <modus-accordion
        (expandedChange)="toggleAccordion(item.id)"  <!-- Creates loops -->
      >
        <modus-collapse
          [expanded]="accordionStates()[item.id]"  <!-- Causes conflicts -->
        >
          <div slot="content">Content for {{ item.id }}</div>
        </modus-collapse>
      </modus-accordion>
    }
  `,
})
export class MyComponent {
  readonly items = signal([{ id: 'item1' }, { id: 'item2' }]);
  readonly accordionStates = signal<Record<string, boolean>>({
    item1: false,
    item2: true,
  });

  toggleAccordion(id: string): void {
    this.accordionStates.update(states => ({
      ...states,
      [id]: !states[id],
    }));
  }
}

Correct Patterns