[Angular] Accordion breaking on *ngFor on accordion-child

[nac0n]

Hi, I'm looking at creating accordion items dynamically in Angular 13+. For achieving this, I'm using the following template:

custom-accordion.component.ts

<div class="accordion">
    <div class="rounded-sm border shadow-sm border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800"
        *ngFor="let accordionItem of accordionItems; index as i;">

        <h2 class="mb-0" [attr.id]="'heading1' + i">
            <button
                class="group relative shadow-sm flex w-full items-center rounded-sm border-0 bg-primary-100 px-5 py-4 text-left h-[48px] text-sm
                text-black-font-color-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white-font-color 
                [&:not([data-te-collapse-collapsed])]:bg-white 
                [&:not([data-te-collapse-collapsed])]:text-black-font-color
                [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-100 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
                type="button" data-te-collapse-init [attr.data-te-target]="'#collapse1' + i" aria-expanded="true"
                [attr.aria-controls]="'collapse1' + i">
                {{accordionItem[headerPropName]}}
                <span
                    class="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-0 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="h-6 w-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                    </svg>
                </span>
            </button>
        </h2>
        <div [attr.id]="'collapse1' + i" class="!visible" data-te-collapse-item data-te-collapse-show
            [attr.aria-labelledby]="'heading1' + i">
            <div class="px-5 py-4">
                {{accordionItem[contentPropName]}}
            </div>
        </div>
    </div>
</div>

(Note the *ngFor in this template)

The idea is to create a custom angular component that implements TWElements accordion, and is customizable with title and content based on the object sent to the custom component but also dynamic in the way that the amount of accordion-children can be applied using *ngFor.

But when i try using the above html, the children render, but their collapse function is not working. I suspect that initTE(); does not find the attributes it needs to initiate collapse. And if this is the case I want to refer to following discussion:
[Angular] Dealing with angular routing and initTE()?
Where the issue was that Button was not initiated because the initTE() could not find the attributes it need to initiate.

Question is, how do i make the initTE(); initiate the accordion Collapse functionality now if the children are rendered dynamically?

P.S
It does not work even if i add initTE(); in the AfterViewInit() lifecycle in the very same .ts-file as above template is in.
P.S.S
It works if I add an accordion without the *ngFor. Which makes me think that it now sees an attribute it needs to initiate.

[juujisai]

Hi! My guess is that at the moment of calling the initTE method the elements with data attributes that are used to initialize the component do not exist yet. You can check if delaying the initTE method for example inside setTimeout make the difference. You can also try to look for a data-te-collapse-init and data-te-collapse-item and see if they exist at the moment of calling the initTE method.

[nac0n]

I conceded to solution below, adding the initTE(); in all the lifecycles I could think of that's needed except OnChanges.

The reason that AfterViewInit() is not enough is because ngFor is running after ngAfterViewInit() has ran. Adding AfterViewChecked fixes that.

export class TeInitiatorComponent implements OnInit, AfterViewInit, AfterViewChecked {

  constructor() { }

  ngOnInit() {
    initTE({ Button, Ripple, Dropdown, Collapse});
  }
  ngAfterViewInit() {
    initTE({ Button, Ripple, Dropdown, Collapse});
  }
  ngAfterViewChecked() {
    initTE({ Button, Ripple, Dropdown, Collapse});
  }
}