Angular 8/7 + ng-bootstrap | Accordion Tutorial by Example

In this tutorial, we will discuss how to add Bootstrap Accordion in Angular Project using ng-bootstrap package with multiple option properties.

We will create a new Angular project then install the ng-bootstrap package to use its UI components like Accordion.

let’s get started!

Create an Angular Project

First, we will create a new Angular project using Ng CLI tool in the latest version 8.3.3.

Run the following command in teminal to create a new Angular project:

Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.3.1 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

 

Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Add Bootstrap Accordion

To use the Accordion component we use ngb-accordion which acts as a wrapper for Accordion panels which are added by using ngb-panel as shown below:

Each panel is created using ngb-panel directive with title property. Content of each panel is provided by ngbPanelContent directive used with ng-template.

Now let’s discuss some important properties:

NgbAccordion

The ngb-accordion components act as a wrapper for accordion panels. It takes the following input and output properties:

Input Properties:

activeIds: Takes an array or comma-separated string if panel ids which we want to open initially.

closeOthers: It enables the accordion to open only one panel at a time. Default is set to true.

destroyOnHide: When the panel is closed/ collapsed, it is removed from DOM. Default is set to true.

type: Used to add style to panels from the following types:'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.

Output Properties:

panelChange: This event is emitted before panel toggle.

Methods:

Following methods can be used to control Accordion component:

isExpanded: Check if panel with provided Id is expanded.

expand: Expands a panel with a provided id.

expandAll: Expands all panels.

collapse: Collapses a panel with the provided id.

collapseAll: Collapses all panels.

toggle: Toggles a panel with the provided id.

In component import NgbPanelChangeEvent & NgbAccordion to use output properties and method events using a template reference variable #myaccordion.

NgbPanel

This directive is used to create a panel in accordion.

It takes the following properties:

Input Properties:

disabled: If true the panel is disabled.

id: Provides an identifier to the accordion panel. Otherwise auto-generated in format ngb-panel-xxx

title: Defines the title of the panel.

type: Type of panel from the following:'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.

NgbPanelContent

This directive wraps the accordion panel content with ng-template to have any HTML markup.

NgbPanelHeader

Panel header can be customized with HTML markup using ngbPanelHeader directive with ng-template as shown below:

Above we also used NgbPanelToggle which is used inside NgbPanelHeader to toggle current pannel

NgbPanelTitle

The directive that wraps only the panel title to have custom HTML markup inside as shown below:

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of