Primeng - Angular Accordion tutorials with examples

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

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 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.

features

1. Long content is grouped into tabs can be collapsed/expanded upon user action
2. It is good for User experience for display the various content sections in UX friendly
3. Each section or tab or panel has header and content
4. Each tab can be expanded or collapsed/expanded
5. Animations can be applied to have a better experience when navigation between different tabs or sections
6. All the tabs are scaled in horizontally by default.
7. 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

This UI library is available as NPM package. Please install primeng UI library using npm install primeng command. Please see my previous post Primeng Angular Example.

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

Here is code for 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

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 is

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

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

            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 accordion, not at tab level. This enables to  load content lazy or on load

• Custom Header

         Custom headers can also 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.