refactor(aria/accordion): Replace ContentChildren with manual registration of triggers

Author: adolgachev

goldens/aria/accordion/index.api.md

@@ -25,11 +25,13 @@ export class AccordionGroup {
     expandAll(): void;
     readonly multiExpandable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly _pattern: AccordionGroupPattern;
+    _registerTrigger(trigger: AccordionTrigger): void;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
+    _unregisterTrigger(trigger: AccordionTrigger): void;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionGroup, "[ngAccordionGroup]", ["ngAccordionGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiExpandable": { "alias": "multiExpandable"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, ["_triggers"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionGroup, "[ngAccordionGroup]", ["ngAccordionGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiExpandable": { "alias": "multiExpandable"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionGroup, never>;
 }
@@ -51,22 +53,25 @@ export class AccordionPanel {
 }
 
 // @public
-export class AccordionTrigger implements OnInit {
+export class AccordionTrigger implements OnInit, OnDestroy {
     readonly active: _angular_core.Signal<boolean>;
     collapse(): void;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     expand(): void;
     readonly expanded: _angular_core.ModelSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
+    readonly index: _angular_core.InputSignal<number | undefined>;
+    // (undocumented)
+    ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
     readonly panel: _angular_core.InputSignal<AccordionPanel>;
     readonly panelId: _angular_core.Signal<string>;
     _pattern: AccordionTriggerPattern;
     toggle(): void;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTrigger, "[ngAccordionTrigger]", ["ngAccordionTrigger"], { "panel": { "alias": "panel"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTrigger, "[ngAccordionTrigger]", ["ngAccordionTrigger"], { "panel": { "alias": "panel"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTrigger, never>;
 }

src/aria/accordion/accordion-group.ts

@@ -11,13 +11,12 @@ import {
   ElementRef,
   booleanAttribute,
   computed,
-  contentChildren,
   inject,
   input,
   signal,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {AccordionGroupPattern} from '../private';
+import {AccordionGroupPattern, sortDirectives} from '../private';
 import {AccordionTrigger} from './accordion-trigger';
 import {ACCORDION_GROUP} from './accordion-tokens';
 
@@ -75,10 +74,23 @@ export class AccordionGroup {
   readonly element = this._elementRef.nativeElement as HTMLElement;
 
   /** The AccordionTriggers nested inside this group. */
-  private readonly _triggers = contentChildren(AccordionTrigger, {descendants: true});
+  private readonly _triggers = signal(new Set<AccordionTrigger>());
+
+  /** The AccordionTriggers nested inside this group. */
+  private readonly _sortedTriggers = computed(() => {
+    const triggers = [...this._triggers()] as AccordionTrigger[];
+    const sortFn =
+      triggers[0]?.index() === undefined
+        ? sortDirectives
+        : (a: AccordionTrigger, b: AccordionTrigger) => a.index()! - b.index()!;
+
+    return triggers.sort(sortFn);
+  });
 
   /** The corresponding patterns for the accordion triggers. */
-  private readonly _triggerPatterns = computed(() => this._triggers().map(t => t._pattern));
+  private readonly _triggerPatterns = computed(() => {
+    return this._sortedTriggers().map(t => t._pattern);
+  });
 
   /** The text direction (ltr or rtl). */
   readonly textDirection = inject(Directionality).valueSignal;
@@ -117,4 +129,16 @@ export class AccordionGroup {
   collapseAll() {
     this._pattern.collapseAll();
   }
+
+  /** Internal method to register each trigger as we can not use contentChildren. */
+  _registerTrigger(trigger: AccordionTrigger) {
+    this._triggers().add(trigger);
+    this._triggers.set(new Set(this._triggers()));
+  }
+
+  /** Internal method to unregister each trigger as we can not use contentChildren. */
+  _unregisterTrigger(trigger: AccordionTrigger) {
+    this._triggers().delete(trigger);
+    this._triggers.set(new Set(this._triggers()));
+  }
 }

src/aria/accordion/accordion-trigger.ts

@@ -9,6 +9,7 @@
 import {
   Directive,
   ElementRef,
+  OnDestroy,
   OnInit,
   booleanAttribute,
   computed,
@@ -53,7 +54,7 @@ import {AccordionPanel} from './accordion-panel';
     '[attr.tabindex]': '_pattern.tabIndex()',
   },
 })
-export class AccordionTrigger implements OnInit {
+export class AccordionTrigger implements OnInit, OnDestroy {
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
 
@@ -69,12 +70,15 @@ export class AccordionTrigger implements OnInit {
   /** The unique identifier for the trigger. */
   readonly id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true));
 
-  /** The unique identifier for the correspondingtrigger panel. */
+  /** The unique identifier for the corresponding trigger panel. */
   readonly panelId = computed(() => this.panel().id());
 
   /** Whether the trigger is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
+  /** The index of the trigger within the accordion group. */
+  readonly index = input<number>();
+
   /** Whether the corresponding panel is expanded. */
   readonly expanded = model<boolean>(false);
 
@@ -93,6 +97,14 @@ export class AccordionTrigger implements OnInit {
     });
 
     this.panel()._pattern = this._pattern;
+
+    this._accordionGroup._registerTrigger(this);
+  }
+
+  ngOnDestroy() {
+    this.panel()._pattern = undefined;
+
+    this._accordionGroup._unregisterTrigger(this);
   }
 
   /** Expands this item. */

src/aria/accordion/accordion.spec.ts

@@ -461,6 +461,7 @@ describe('AccordionGroup', () => {
         <div class="item-container">
           <button
             ngAccordionTrigger
+            [index]="$index"
             [panel]="panel"
             [disabled]="item.disabled()"
             [(expanded)]="item.expanded"

src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html

@@ -19,6 +19,7 @@ <h3 class="example-accordion-header">
         <button ngAccordionTrigger 
                 #trigger="ngAccordionTrigger" 
                 class="example-accordion-trigger"
+                [index]="$index"
                 [disabled]="item.disabled()"
                 [(expanded)]="item.expanded"
                 [panel]="panel">