In this tutorial, We are going to learn Primeng Angular accordion basics with examples.
Usually, the accordion is used to show the long summary content where it will not fit into the page and divide and group content under the tabs of an Accordion.
Here is code for Angular Application Module

Here there are three tabs on which each tab is opened on clicking each tab
This component provides three predefined styles which you can override with custom styles. The below three styles contains styles which you can override in component style css or scss files
Angular Accordion Introduction
It is UI element that shows/hide the content section on the page on user click for a group of items. Primeng also provide Angular accordion componentUsually, the accordion is used to show the long summary content where it will not fit into the page and divide and group content under the tabs of an Accordion.
features
- Long content is grouped into tabs can be collapsed/expanded upon user action
- It is good for User experience for display the various content sections in UX friendly
- Each section or tab or panel has header and content
- Each tab can be expanded or collapsed/expanded
- Animations can be applied to have a better experience when navigation between different tabs or sections
- All the tabs are scaled in horizontally by default.
- This can also be nested or can be placed inside another accordion
Prerequisite
- Angular Application Creation
First Create an Angular Application using angular CLI generator.
Angular CLI is an auto-generated tool for creation prototype angular application.
- Integrate Primeng into Angular Application
Primeng Accordion Example
Primeng provides each UI Component in the form of an Angular Module. Please import AccordionModule into your application module
This is a simple example for creating Accordion
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule} from 'primeng/accordion';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AccordionModule, // Accordion UI Component Support
GrowlModule
],
providers: [],
bootstrap: [AppComponent],
schemas:
[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Html changes<div style="text-align:center">
<h1>
Primeng Angular Accordion Component Example
</h1>
</div>
<div style="text-align:center">
<p-accordion>
<p-accordionTab header="Basic Form" >
Basic Form
</p-accordionTab>
<p-accordionTab header="Additional Information">
Additional Information
</p-accordionTab>
<p-accordionTab header="My Settings">
My Settings
</p-accordionTab>
</p-accordion>
</div>
Output is
Here there are three tabs on which each tab is opened on clicking each tab
Disable
The accordion is enabled by default. There is a disabled property at each tab level Here is an example for Disable Tab 1 of Accordion.<div style="text-align:center">
<h1>
Primeng Angular Accordion Component Disabled Example
</h1>
</div>
<p-accordion >
<p-accordionTab [disabled]="true" header="Tab 2">
</p-accordionTab>
<p-accordionTab header="Tab 2">
<p>
This is Primeng accordion CONTENT of Tab2 with example
</p>
</p-accordionTab>
<p-accordionTab header="Tab 3">
<p>
This is Primeng accordion CONTENT of Tab3 with example
</p>
</p-accordionTab>
</p-accordion>
Output isngFor Example
This is an example of showing things- How to create an Accordion and tab contents programmatically
- How to use ngFor in Accordion dynamically
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
private tabs: TabItem[];
ngOnInit(): void {
this.tabs = [{
heading: 'header1',
content: 'content1'
}, {
heading: 'header2',
content: 'content2'
},
{
heading: 'header3',
content: 'content3'
}]
}
}
export class TabItem {
heading: string;
content: string;
}
ngfor usage<div style="text-align:center">
<h1>
Primeng Angular Accordion Component ngFor Example
</h1>
</div>
<p-accordion >
<p-accordionTab *ngFor="let tab of tabs" header="{{tab.heading}}">
{{tab.content}}
</p-accordionTab>
</p-accordion>
Output is
styles
This component provides three predefined styles which you can override with custom styles. The below three styles contains styles which you can override in component style css or scss files- ui-accordion
This is a style of container for all the tabs of an accordion.
- ui-accordion-header
- ui-accordion-content
Other features
- Expand and Close all
- lazy
- Custom Header
- Multiple
EmoticonEmoticon