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.
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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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:
Contact Us