Primeng: Accordion: [activeIndex] not bound when accordion tabs are created with *ngFor

[ntkolev]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Clean - http://plnkr.co/edit/raJGQkHfwzkEaxVOmRnW?p=preview
With AfterViewInit - http://plnkr.co/edit/ktGFyScZJUabh6QfQiEG?p=preview
With setTimeout() - http://plnkr.co/edit/KeqOc8nZhUaJrGAw6cKR?p=preview

Current behavior
Clean - all accordion tabs stay closed
With AfterViewInit - there's an Angular exception 'Expression has changed after it was checked.'
With setTimeout - only the first accordion tab stays open, the other do not respond to user interaction at all.

Expected behavior
We should be able to set an active accordion tab index initially, ideally without resolving to any hacks. Even setTimeout didn't work this time.

• Angular version: 4.4.3

• PrimeNG version: 4.2.1
  

• Browser: all

[RichardMcElroy]

Hi. I was having an issue similar to https://github.com/primefaces/primeng/issues/4530 but with the accordion component and realized this is related.
I believe the accordion has the same problem as tabview - it needs to have the [selected] attribute set as well to work correctly.

I was able to modify the first plunkr to make it work: http://plnkr.co/edit/CiiMvAEPZ5pDOwUgYXGy?p=preview

Hope this helps.

[lf-novelt]

Error still happening as of 7.1.3 (latest)

[dmoore1181]

Has anyone found a work around for this issue that works without setting the selected on the accordionTab? My current setup is that I have a parent component with the accordion and then child components with the accordionTab, and I really don't want to have to add an input to get the Array for the active indexes so that each child component can see if they need to set the selected input. Also, I am truly just wanting to have the accordion expanded if it is the only one if there is an easier way to do that.

[riorudo]

Error still happening on primeNG v8.0.2 with Angular v8.2.0 (see StackBlitz example).

I have a child component with an accordion where the accordion tabs are created with *ngFor.

When I try to set activeIndex, I get the error ExpressionChangedAfterItHasBeenCheckedError (Variation 01 in my example).

Then I tried a setTimout and the activeIndex is set correctly and error-free, but the accordion tabs initialized as closed don't respond to user interaction at all(Variation 02 in my example).

[andriy101]

hi Riorudo, please check my workaround solution in your forked example

 private waitRequestAnimationFrame() {
     return new Promise(resolve => requestAnimationFrame(resolve));
 }
 private fixAccordion(tabsNumber) {
     return new Promise(resolve => {
        Array.from({length: tabsNumber}).forEach(async (_, ind) => {
            await this.waitRequestAnimationFrame();
            this.activeIndex = [ind];
            if (ind === tabsNumber - 1) {
                resolve();
            }
        });
    });
}

`

after calling await this.fixAccordion(this.dataList.length); function, you can set any value for active index. Make sure a wrapper function is async.

THIS WORKAROUND SOLUTION IS WORKING ALSO IN PRIME NG V6