fix(experimental): Accordion fix error with dynamic items

projects/demo/src/modules/components/accordion/examples/1/index.html

@@ -1,12 +1,6 @@
 <tui-accordion>
-    <button tuiAccordion>Taiga UI cdk</button>
-    <tui-expand>
-        Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
-    </tui-expand>
-    <button [tuiAccordion]="true">Taiga UI core</button>
-    <tui-expand>
-        Basic elements needed to develop components, directives and more using Taiga UI design system
-    </tui-expand>
-    <button tuiAccordion>Taiga UI kit</button>
-    <tui-expand>The main set of components used to build Taiga UI based Angular applications</tui-expand>
+    <ng-container *ngFor="let item of data | keyvalue; let index = index">
+        <button [tuiAccordion]="index === 1">{{ item.key }}</button>
+        <tui-expand>{{ item.value }}</tui-expand>
+    </ng-container>
 </tui-accordion>

projects/demo/src/modules/components/accordion/examples/1/index.ts

@@ -1,13 +1,23 @@
+import {KeyValuePipe, NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAccordion} from '@taiga-ui/experimental';
 
 @Component({
     standalone: true,
-    imports: [TuiAccordion],
+    imports: [KeyValuePipe, NgForOf, TuiAccordion],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export default class Example {}
+export default class Example {
+    protected readonly data = {
+        'Taiga UI cdk':
+            'Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities',
+        'Taiga UI core':
+            'Basic elements needed to develop components, directives and more using Taiga UI design system',
+        'Taiga UI kit':
+            'The main set of components used to build Taiga UI based Angular applications',
+    };
+}

projects/experimental/components/accordion/accordion.component.ts

@@ -1,16 +1,20 @@
-import type {QueryList} from '@angular/core';
+import type {AfterViewInit, QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
     ContentChildren,
+    DestroyRef,
+    inject,
     Input,
     signal,
     ViewEncapsulation,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
 import {TuiGroup, tuiGroupOptionsProvider} from '@taiga-ui/core/directives/group';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {TuiExpand} from '@taiga-ui/experimental/components/expand';
+import {ReplaySubject} from 'rxjs';
 
 import {TuiAccordionDirective} from './accordion.directive';
 
@@ -32,11 +36,14 @@ import {TuiAccordionDirective} from './accordion.directive';
         '[attr.data-size]': 'size()',
     },
 })
-export class TuiAccordionComponent {
-    @ContentChildren(TuiExpand, {static: true} as any)
+export class TuiAccordionComponent implements AfterViewInit {
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly toggle$ = new ReplaySubject<TuiAccordionDirective>(Infinity);
+
+    @ContentChildren(TuiExpand)
     public readonly expands: QueryList<TuiExpand> = EMPTY_QUERY;
 
-    @ContentChildren(TuiAccordionDirective, {static: true} as any)
+    @ContentChildren(TuiAccordionDirective)
     public readonly directives: QueryList<TuiAccordionDirective> = EMPTY_QUERY;
 
     @Input()
@@ -49,22 +56,29 @@ export class TuiAccordionComponent {
         this.size.set(size);
     }
 
-    public toggle(directive: TuiAccordionDirective, value: boolean): void {
-        if (this.closeOthers && value) {
-            this.expands.forEach((expand) => {
-                expand.expanded = false;
-            });
+    public ngAfterViewInit(): void {
+        this.toggle$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((d) => {
+            if (this.closeOthers && d.open()) {
+                this.expands.forEach((expand) => {
+                    expand.expanded = false;
+                });
+
+                this.directives.forEach((dir) => {
+                    if (dir === d) {
+                        return;
+                    }
 
-            this.directives.forEach((dir) => {
-                if (dir === directive) {
-                    return;
-                }
+                    dir.open.set(false);
+                    dir.tuiAccordion = false;
+                    dir.tuiAccordionChange.emit(false);
+                });
+            }
 
-                dir.open.set(false);
-                dir.tuiAccordionChange.emit(false);
-            });
-        }
+            this.expands.get(this.directives.toArray().indexOf(d))!.expanded = d.open();
+        });
+    }
 
-        this.expands.get(this.directives.toArray().indexOf(directive))!.expanded = value;
+    public toggle(directive: TuiAccordionDirective): void {
+        this.toggle$.next(directive);
     }
 }

projects/experimental/components/accordion/accordion.directive.ts

@@ -34,12 +34,13 @@ export class TuiAccordionDirective implements OnChanges {
 
     public ngOnChanges(): void {
         this.open.set(!!this.tuiAccordion);
-        this.accordion.toggle(this, this.open());
+        this.accordion.toggle(this);
     }
 
     public toggle(): void {
         this.open.set(!this.open());
+        this.tuiAccordion = this.open();
         this.tuiAccordionChange.emit(this.open());
-        this.accordion.toggle(this, this.open());
+        this.accordion.toggle(this);
     }
 }

projects/experimental/components/expand/expand.component.ts

@@ -1,13 +1,16 @@
 import {NgIf, NgTemplateOutlet} from '@angular/common';
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ContentChild,
+    inject,
     Input,
     signal,
     TemplateRef,
 } from '@angular/core';
 import {TuiItem} from '@taiga-ui/cdk/directives/item';
+import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 
 @Component({
     standalone: true,
@@ -30,6 +33,9 @@
     },
 })
 export class TuiExpand {
+    private readonly el = tuiInjectElement();
+    private readonly cdr = inject(ChangeDetectorRef);
+
     @ContentChild(TuiItem, {read: TemplateRef})
     protected content?: TemplateRef<any>;
 
@@ -38,7 +44,14 @@
 
     @Input()
     public set expanded(expanded: boolean) {
+        if (expanded === this.signal()) {
+            return;
+        }
+
         this.signal.set(expanded);
+        // TODO: try removing in Angular 17
+        this.cdr.detectChanges();
+        this.el.classList.toggle('_expanded', expanded);
     }
 
     protected onTransitionEnd({propertyName}: TransitionEvent): void {