Angular PrimeNG Accordion Programmatic Control

Angular PrimeNG is a UI component library built by PrimeTek for helping out Angular developers for easing the process of developing consistent and scalable web interfaces in less time. In this article, we will talk about Accordion Programmatic Control in Angular PrimeNG.

The Accordion Component is used to display the content in a collection of tabs. The tabs of the accordion can be opened and closed by clicking on the header of the accordion tabs but this can also be controlled programmatically by modifying the activeIndex array of the accordion component.

Angular PrimeNG  Accordion Programmatic Control Properties:

• multiple: When this property is true, multiple accordion tabs can be opened at a time.
• activeIndex: It is the index of the active tab or an array of indexes to change the selected tab programmatically.

Angular PrimeNG  Accordion Programmatic Control AccordionTab Properties:

• disabled: This property can be set to true to disable the specific accordion tab.

Syntax:

// File Name: app.component.html

<button 
    pButton 
    type="button" 
    label="..." 
    (click)="toggleTab(index)">
</button>

<p-accordion [multiple]="true">
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[0]">
        ...
    </p-accordionTab>
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[1]">
        ...
    </p-accordionTab>
</p-accordion>

// File Name: app.component.ts

toggleTab(idx: number)
{
    this.activeTabs[idx] = !this.activeTabs[idx];
}

Creating the Application and Installing the Required Modules:

Step 1: Create the Angular app using the following command.

ng new my_app

Step 2: After creating the app, move to the project folder using the command written below.

cd new_app

Step 3: Finally, Install the following modules in your project directory

npm install primeng --save
npm install primeicons --save

Project Structure: Now, the project structure will as shown in the below picture.

Project Structure

Example 1: In this example, we used the buttons to toggle the accordion tabs programmatically.

• app.component.html:

HTML

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion
        Programmatic Control
    </h4>

    <div class="mb-4">
        <button
            pButton
            type="button"
            class="mr-3"
            label="Toggle Tab 1"
            (click)="toggleTab(0)">
        </button>

        <button
            pButton
            type="button"
            label="Toggle Tab 2"
            (click)="toggleTab(1)">
        </button>
    </div>

    <p-accordion [multiple]="true">
        <p-accordionTab
            header="AccordionTab 1 Header"
            [(selected)]="activeTabs[0]">
            This is the content of the Accordion Tab 1.
        </p-accordionTab>
        <p-accordionTab
            header="AccordionTab 2 Header"
            [(selected)]="activeTabs[1]">
            This is the content of the Accordion Tab 2.
        </p-accordionTab>
    </p-accordion>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})

export class AppComponent {
    activeTabs: boolean[] = [false, false];

    toggleTab(idx: number)
    {
        this.activeTabs[idx] =
            !this.activeTabs[idx];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: The accordion tabs with the disabled property set to true can also be toggled programmatically even if they are disabled.

• app.component.html:

HTML

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion
        Programmatic Control
    </h4>

    <div class="mb-4">
        <button
            pButton
            type="button"
            label="Toggle The Disabled Tab"
            (click)="toggleTab(1)">
        </button>
    </div>

    <p-accordion [multiple]="true">
        <p-accordionTab
            header="Active Accordion Tab"
            [(selected)]="activeTabs[0]">
            This is the content of the Active Accordion Tab.
        </p-accordionTab>
        <p-accordionTab
            header="Disabled Accordion Tab"
            [disabled]="true"
            [(selected)]="activeTabs[1]">
            This is the content of the Disabled Tab.
        </p-accordionTab>
    </p-accordion>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})

export class AppComponent {
    activeTabs: boolean[] = [false, false];

    toggleTab(idx: number) {
        this.activeTabs[idx] =
            !this.activeTabs[idx];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng/accordion