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.
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 >
|
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];
}
}
|
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.
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 >
|
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];
}
}
|
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
Last Updated :
07 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...