Primeng Angular Accordion tutorial |p-accordion examples

In this tutorial, We are going to learn Primeng Angular accordion basics with examples.

Angular Accordion Introduction

Accordion is a UI element that shows/hides the content section on the page on the user’s click for a group of items.

Primeng also provides Angular accordion component 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.

Why Accordion is required?

• Long content is grouped into tabs that can be collapsed/expanded upon user action
• It is good for the User experience to display the various content sections in UX friendly
• Each section or tab or panel has a header and content
• Each tab can be expanded or collapsed/expanded
• Animations can be applied to have a better experience when navigating between different tabs or sections
• All the tabs are scaled horizontally by default.
• This can also be nested or can be placed inside another accordion

Angular primeng accordion example

Create an Angular Application

First Create an Angular Application using an angular CLI generator.

Angular CLI is an auto-generated tool for the creation of a prototype angular application.

ng new angular-app

It creates an angular application that installs all dependencies and is ready to start a server.

Integrate Primeng into Angular Application

This UI library is available as an NPM package.

Please install the primeng UI library using the npm install primeng command. Please see my previous post Stepy by Step guide for integration of Primeng Angular 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 of creating an Accordion.

Here is the code for the Angular Application Module

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

How to disable the accordion tab in Angular?

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 is

accordion dynamic tabs using ngFor 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

This component provides three predefined styles which you can override with custom styles.

The below three styles contains styles that you can override in component CSS or scss files

• ui-accordion

  This is a style of container for all the tabs of an accordion.

• ui-accordion-header This is for accordion header styles.

• ui-accordion-content This is for accordion header content styles.

Other features

• Expand and Close all onClose and onOpen are events are used to expand and close the tabs of an accordion

• lazy This property is configured at the accordion, not at tab level. This enables to load content lazy or on load

• Custom Header

  Custom headers can also be set in an accordion tab using p-header ta

• Multiple This is configured at the container level. Once enabled, All the tabs are actively created and loaded.