How to use ngb-accordion in a ngFor loop?

user_5014559 0
Viewed 3975

I'm using the ngb-accordion in a for loop. It's working for a part, but it seems that it is not possible to open the active element in a for loop.

I want make it possible that when one of the accordion elements includes the property 'OpenAccordion' the panel of that element opens. So I need to define the activeIds and the id for each element inside the array to make it possible.

When I define the *ngFor outside the <ngb-accordion></ngb-accordion> it works because I can link the index to the activeIds and id. But his time it's not possible to open one panel at a time because the panels are seperate.

[closeOthers] is working on this one but open one panel at a time is not working:

<ngb-accordion  
    class="accordion-item" 
    [closeOthers]="true"  
    activeIds="true-{{i}}">

    <div *ngFor="let child of items?.children | async; let i = index">
        <ngb-panel id="{{(child?.value?.properties | async)?.property.includes('OpenAccordion')}}-{{i}}">
            <ng-template ngbPanelHeader let-opened="opened">
                <div class="d-flex align-items-center justify-content-between">
                    <button ngbPanelToggle class="btn btn-link container-fluid text-left">
                        <h5>
                            {{ (child?.value?.properties | async)?.title }}
                        </h5>
                    </button>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                <h4>test</h4>
            </ng-template>
        </ngb-panel>
    </div>

</ngb-accordion>

When I define the *ngFor inside the <ngb-accordion></ngb-accordion> the [closeOthers] functionality works, but this time it's not possible to open the active accordion panel. Because the index of the activeId is unknown and does not match the id of the active element.

Open one panel at a time is working but [closeOthers] is not working on this one:

<ng-template ngFor let-child [ngForOf]="items?.children | async" let-i="index">
    <ngb-accordion  
        class="accordion-item" 
        [closeOthers]="true"  
        activeIds="true-{{i}}">

        <ngb-panel id="{{(child?.value?.properties | async)?.property.includes('OpenAccordion')}}-{{i}}">
            <ng-template ngbPanelHeader let-opened="opened">
                <div class="d-flex align-items-center justify-content-between">
                    <button ngbPanelToggle class="btn btn-link container-fluid text-left">
                        <h5>
                            {{ (child?.value?.properties | async)?.title }}
                        </h5>
                    </button>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                <h4>test</h4>
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</ng-template>

How can I make it possible to let both functions [closeOthers] and open one panel at a time works in a *ngFor loop?

ng-bootstrap angular accordion javascript
1 Answers

In you first solution, there is a mistake, you used the variable i before it is declared:

<ngb-accordion  
class="accordion-item" 
[closeOthers]="true"  
activeIds="true-{{i}}"> // i used before declaration?

<div *ngFor="let child of items?.children | async; let i = index">

I just created a simple sample to use ngFor with ngb-accordion, it works good.

You should try to ngFor inside the <ngb-accordion>:

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-accordion-static',
  templateUrl: './accordion-static.html'
})
export class NgbdAccordionStatic {

  accordionSamples = [
    {
      id: 1,
      title: 'Simple',
      content: `Simple content sample`
    },
    {
      id: 2,
      title: 'Fancy',
      content: `Fancy content interesting`
    }
    ]

}

HTML:

<ngb-accordion [closeOthers]="true" activeIds="acc-2">
  <ngb-panel *ngFor="let acc of accordionSamples" id="acc-{{acc.id}}" title="{{acc.title}}">
    <ng-template ngbPanelContent>
      {{acc.content}}
    </ng-template>
  </ngb-panel>
</ngb-accordion>

https://stackblitz.com/edit/angular-mdbedd?file=src%2Fapp%2Faccordion-static.html

user_39436320
Related