Switch on ngbAccordion via TypeScript File

Question

Switch on ngbAccordion via TypeScript File

I need to implement a function in my component.ts file that will toggle the accordion using a button. Can you help me with the script for this?

This is my HTML code:

<button (click)="toggleAcc()" type="button" class="btn btn-primary">Primary</button>
    <ngb-accordion id="acc1" #acc="ngbAccordion" activeIds="ngb-panel-0">
                <ngb-panel id="detailAcc">
                    <ng-template ngbPanelTitle>
                        <span>&#9733; <b>Fancy</b> title &#9733;</span>
                    </ng-template>
                    <ng-template ngbPanelContent>
                       Hello World!!!!
                    </ng-template>
                </ngb-panel>
            </ngb-accordion>

I am looking for a script for the toggleAcc method

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
})

toggleAcc(){
     **********Need code here to toggle the accordion*********
}

I am using Angular 14, Bootstrap 5, and ng-bootstrap12

angular typescript bootstrap-5 ng-bootstrap

Answer 1

Answer №1

Method 1: Providing panel ID and toggling.

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@ViewChild('acc') acc: NgbAccordion;

toggleAccordion() {
  this.acc.toggle('detailAcc');
}

Method 2: Loop through the 'panels' array to toggle each panel.

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@ViewChild('acc') acc: NgbAccordion;

toggleAccordion() {
  for (let panelId of this.acc.panels.map((x) => x.id)) {
    this.acc.toggle(panelId);
  }
}

View Sample StackBlitz Demo

Answer 2

Method 1: Providing panel ID and toggling.

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@ViewChild('acc') acc: NgbAccordion;

toggleAccordion() {
  this.acc.toggle('detailAcc');
}

Method 2: Loop through the 'panels' array to toggle each panel.

import { Component, ViewChild } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@ViewChild('acc') acc: NgbAccordion;

toggleAccordion() {
  for (let panelId of this.acc.panels.map((x) => x.id)) {
    this.acc.toggle(panelId);
  }
}

View Sample StackBlitz Demo

Switch on ngbAccordion via TypeScript File

Answer №1

Similar questions

Looking to adjust the API response to fit the necessary JSON format for an Angular project?

Tips for troubleshooting or modifying a dependency that exclusively consists of type declaration files

Angular: Display or Conceal button when hovering over a div

Encountering an error of ExpressionChangedAfterItHasBeenCheckedError while trying to refresh the

Updating a boolean value and passing a body to an Angular HttpClient PUT request

How to Insert a New User into the Database Using Angularfire2

Is it possible for an uninitialized field of a non-null literal string type to remain undefined even with strict null checks in

The type 'undefined' cannot be assigned to the type 'string | Buffer | { key: string | Buffer; passphrase: string; } | GetPublicKeyOrSecret'

Dealing with Uncaught Promises in Angular 2 while injecting a service

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I'm having trouble getting Remix.run and Chart.js to cooperate, can anyone offer some guidance?

Having trouble retrieving data from a JSON file within an Angular application when utilizing Angular services

Update ngModel value following the PUT request response

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

Is there a way to choose multiple IDs in this code that all share a common word?

Iterate and combine a list of HTTP observables using Typescript

Guide on transforming a Unix timestamp into either "2000-01-01" or "2000-05-24 20:00:00" format, or the opposite way, using Deno

Has anyone tried integrating Reveal JS with Angular 8?

What is the most effective way to conceal an element in Angular 4 by utilizing *ng-if?

The module "jquery" in jspm, jQuery, TypeScript does not have a default export