fix(experimental): use valid content children from template into tui-accordion

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

@@ -0,0 +1,14 @@
+<button
+    size="s"
+    tuiButton
+    (click)="changeData()"
+>
+    Change data
+</button>
+
+<tui-accordion class="tui-space_top-3">
+    <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/7/index.ts

@@ -0,0 +1,80 @@
+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 {TuiButton} from '@taiga-ui/core';
+import {TuiAccordion} from '@taiga-ui/experimental';
+
+@Component({
+    standalone: true,
+    imports: [KeyValuePipe, NgForOf, TuiAccordion, TuiButton],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected data: Record<string, string> = {
+        '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',
+    };
+
+    protected changeData(): void {
+        this.data = {
+            [`Title #${uniqueId()}`]: randomSentence(10),
+            [`Title #${uniqueId()}`]: randomSentence(50),
+        };
+    }
+}
+
+function uniqueId(): string {
+    return (Math.random() + 1).toString(36).slice(7);
+}
+
+function randomSentence(n: number): string {
+    const words = [
+        'The sky',
+        'above',
+        'the port',
+        'was',
+        'the color of television',
+        'tuned',
+        'to',
+        'a dead channel',
+        '.',
+        'All',
+        'this happened',
+        'more or less',
+        '.',
+        'I',
+        'had',
+        'the story',
+        'bit by bit',
+        'from various people',
+        'and',
+        'as generally',
+        'happens',
+        'in such cases',
+        'each time',
+        'it',
+        'was',
+        'a different story',
+        '.',
+        'It',
+        'was',
+        'a pleasure',
+        'to',
+        'burn',
+    ];
+
+    let sentence = '';
+
+    while (n--) {
+        sentence += `${words[Math.floor(Math.random() * words.length)]} `;
+    }
+
+    return sentence;
+}

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

@@ -18,6 +18,7 @@ export default class Page {
         'Eager and Lazy',
         'Nested',
         'Connected',
+        'Dynamic data',
     ];
 
     protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];

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

@@ -14,7 +14,7 @@ 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 {delay, ReplaySubject} from 'rxjs';
 
 import {TuiAccordionDirective} from './accordion.directive';
 
@@ -57,25 +57,33 @@ export class TuiAccordionComponent implements AfterViewInit {
     }
 
     public ngAfterViewInit(): void {
-        this.toggle$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((d) => {
-            if (this.closeOthers && d.open()) {
-                this.expands.forEach((expand) => {
-                    expand.expanded = false;
-                });
+        this.toggle$
+            .pipe(delay(0), takeUntilDestroyed(this.destroyRef))
+            .subscribe((accordion) => {
+                if (this.closeOthers && accordion.open()) {
+                    this.expands.forEach((expand) => {
+                        expand.expanded = false;
+                    });
 
-                this.directives.forEach((dir) => {
-                    if (dir === d) {
-                        return;
-                    }
+                    this.directives.forEach((dir) => {
+                        if (dir === accordion) {
+                            return;
+                        }
 
-                    dir.open.set(false);
-                    dir.tuiAccordion = false;
-                    dir.tuiAccordionChange.emit(false);
-                });
-            }
+                        dir.open.set(false);
+                        dir.tuiAccordion = false;
+                        dir.tuiAccordionChange.emit(false);
+                    });
+                }
 
-            this.expands.get(this.directives.toArray().indexOf(d))!.expanded = d.open();
-        });
+                const expand = this.expands.get(
+                    this.directives.toArray().indexOf(accordion),
+                );
+
+                if (expand) {
+                    expand.expanded = accordion.open();
+                }
+            });
     }
 
     public toggle(directive: TuiAccordionDirective): void {