web-dev-qa-db-fra.com

Angular 4+ bootstrap NgbAccordion comment développer / réduire tout

J'ai joué avec angular en combinaison avec ng-bootstrap et je suis perplexe sur les points suivants:

J'ai cette NgbAccordion sur ma page:

<ngb-accordion #acc="ngbAccordion">
    <ngb-panel *ngFor="let container of answer.resultObj.containers.containers" title="{{container.metadata.title}}">
      <ng-template ngbPanelContent>
        <app-containers [container]="container"></app-containers>
      </ng-template>
    </ngb-panel>
  </ngb-accordion>

cela se traduit par un lit de panneaux ngb tous effondrés. C'est précisément ce que je veux et je peux basculer l'expansion des objets du conteneur d'application en cliquant dessus.

Je veux également un bouton pour développer tous les panneaux ngb . Je n'arrive pas à le faire fonctionner. J'ai trouvé un bel exemple basé sur Angularjs (<2) mais cela ne fonctionne pas et l'option [isOpen] qui semblait avoir été là à un moment donné n'existe plus?!

Mon angular:

import {Component, Input} from '@angular/core';
import {Answer} from '../model/answer';
@Component({
  selector: 'app-answer',
  templateUrl: './answer.component.html',
  styleUrls: ['./answer.component.css'],
  providers: []
})
export class AnswerComponent {
  @Input() answer: Answer;

  constructor() {
  }
}

Toute aide serait appréciée...

angulartypescriptng-bootstrap
4
Ivonet

Vous pouvez utiliser l'entrée activeIds sur l'accordéon

https://ng-bootstrap.github.io/#/components/accordion/api

Fondamentalement, attribuez un identifiant unique à chacun de vos panneaux

<ngb-panel *ngFor="let container ...; let i= index" title="Panel{{i}}" id="panel-{{i}}"

et déclarer dans votre composant une liste des identifiants actifs (= identifiants des panneaux qui doivent être ouverts)

activeIds: string[] = [];

Modifiez ensuite cette liste lorsque vous souhaitez ouvrir/fermer les panneaux

this.activeIds = [];//All panels closed
this.activeIds = ['panel-1', 'panel-2']; //panels 1 and 2 are open

Et liez cette variable à l'entrée activeIds de l'accordéon

<ngb-accordion #acc="ngbAccordion" [activeIds]="activeIds"

Enfin, ajoutez les boutons

<button (click)="activeIds=[]" >close all</button>
<button (click)="openAll()" >open all</button>

openAll()
{
    this.activeIds = [/* add all panel ids here */];
}

J'ai créé un stackblitz pour illustrer cela

https://stackblitz.com/edit/angular-nzzwnc?file=app%2Fapp.component.ts

14
David

= Voici une solution qui vous permettra d'ouvrir un seul accordéon à la fois. vous pouvez utiliser avec (panelChange) Capture les modifications de ngb comme ceci:

html:

   <ngb-accordion #acc="ngbAccordion"  [activeIds]="activeId"  (panelChange)="toggleAccordian($event)">
    <ngb-panel *ngFor="let option of options;" title="{{option}}">
        <ng-template ngbPanelContent>
                    <ul class="nav nav-tabs">
                      <!--some code-->
                    </ul>
        </ng-template>
    </ngb-panel>
</ngb-accordion>

ts:

activeId: string = "";

toggleAccordian(event) {
    // If it is already open you will close it and if it is closed open it
    this.activeId = this.activeId == event.panelId ? "" : event.panelId;
}
1
Baruch G.