LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Accordion for Angular 2

Created: 09 June 2016

Updated: 14 April 2017

IntegralUI Accordion is a native Angular 2 component that represents a list of expandable panels arranged vertically. It is a more advanced version of Accordion directive for AngularJS. In this article, we will give detailed information on what features are included in Accordion component.

Accordion component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

The demonstration above shows only the basic features available in Accordion component. There are few group boxes each with a header and content panel. Animations during expand/collapse are built using only CSS.

How to Use IntegralUI Accordion in Angular 2

There are two ways to create an accordion in your app:

  • Statically using HTML only
  • Dynamically through code in Angular

In simple forms, accordions only require little or none javascript code; mostly they only require settings on how the accordion will look like using HTML.

In Angular 2, at first we need to create a root component. This component will hold the Accordion and/or other components and HTML elements. Accordion component by itself cannot do much. We need to use the GroupBox component as its content. The GroupBox component consists of a header and content panel; both are fully customizable.

In order to add groups to the Accordion, we can either set them manually in HTML or create an array object that will hold all groups. For example:

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component, ViewEncapsulation } from '@angular/core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['accordion-overview.css'],

encapsulation: ViewEncapsulation.None

})

export class AppComponent {

// An Array object that holds all group objects shown in Accordion

// It is set as a list of any custom objects, you can use any custom fields and data bind them with Accordion using its properties

private data: Array<any>;

 

// Initialize accordion groups in component constructor

constructor(){

this.data = [

{

icon: 'library',

text: 'Books',

body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'

},

{

icon: 'album',

text: 'Music',

body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'

},

{

icon: 'star-empty',

text: 'Favorites',

body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'

}

];

}

}

 

bootstrap(AppComponent);

//

// app.template.html file

//

 

<style>

.group-content

{

padding: 50px 0;

border: thin solid #bbbbbb;

padding: 10px;

border-top-color: transparent;

font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;

}

</style>

<div style="width:400px">

<iui-accordion [groups]="data">

<iui-groupbox *ngFor="let group of data" text="{{group.text}}" icon="{{group.icon}}">

<div class="group-content">{{group.body}}</div>

</iui-groupbox>

</iui-accordion>

</div>

/*

accordion-overview.css file

*/

.group-content

{

padding: 50px 0;

border: thin solid #bbbbbb;

padding: 10px;

border-top-color: transparent;

font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;

}

.icons

{

background: url(../resources/icons-x24.png) no-repeat 0 0;

display: inline-block;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.library

{

background-position: 0 -72px;

}

.album

{

background-position: -144px -48px;

}

.star-empty

{

background-position: -216px -72px;

}

This is basic form, where each group has a title and icon in its header, and content panel shows a text in multiple lines. It is good enough as a start point, you can modify it further to add custom content to group header or its content panel.

In cases where you want to handle events and/or complex scenarios like adding command buttons to the accordion headers, it requires additional code in Angular. For example, you can create an accordion where in each header there is a checkbox. When checked, the specified accordion group can become collapsed and disabled.

All properties of the accordion component can be set using a separate attribute that is linked to an object in your application scope or a specified value.

Here is a list of available properties:

  • dataFields - specifies an object that map the fields names from data source to the ones used by the Accordion
  • groups - holds a reference to the list of groups defined in your application component
  • selectedGroup - an object that points to the currently selected group

Note The GroupBox component is a separate component that can also be used outside of the Accordion.

Data Binding in Accordion

For advanced settings, for example when we have a custom data source which may differ from internal data settings of the accordion, we can use data binding which will match the names of data fields in your data source with those used by the accordion.

By specifying the groups property to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the Accordion using any kind of custom data source.

This feature is also usable when you need to create an accordion dynamically on demand, by loading additional groups from a remote data source when required.

Supported Events

Most of actions in Accordion are accompanied by events. For example, whenever a GroupBox is selected, the selection events are thrown, or when a group is expanded or collapsed, expanding and collapsing events are thrown, etc.

Here is a list of available events:

  • afterCollapse - occurs after group is collapsed
  • afterExpand - occurs after group is expanded
  • afterSelect - occurs after group is selected
  • beforeCollapse - occurs before group is collapsed
  • beforeExpand - occurs before group is expanded
  • beforeSelect - occurs before group is selected
  • clear - occurs when all groups are removed from the Accordion
  • groupAdded - occurs when new group is added to the Accordion
  • groupAdding - occurs before group is added
  • groupClick - occurs when group header is clicked
  • groupDblClick - occurs when group header is double-clicked
  • groupRemoved - occurs when group is removed from the Accordion
  • groupRemoving - occurs before group is removed
  • selectionChanged - occurs when currently selected group has changed

How to Add/Remove Groups Dynamically

In most cases, you will set the Accordion with all groups and their content from the start in HTML. However, sometimes you may need to add a new group dynamically on demand or even change the whole content of the Accordion.

For this purpose, you can use the built-in methods that allow you to change dynamically the structure of the Accordion:

//

// app.component.ts file

//

 

export class AppComponent {

// An Array object that holds all group objects shown in Accordion

// It is set as a list of any custom objects, you can use any custom fields and data bind them with Accordion using its properties

private data: Array;

 

// Get a reference to the Accordion component using a variable set in HTML

@ViewChild('accordion') accordion: IntegralUIAccordion;

 

// Initialize accordion groups in component constructor

constructor(){

this.data = [];

}

 

// Adds a new group to the end of the Accordion

addGroup(){

this.accordion.addGroup({ text: "Group " + (this.data.length+1).toString() });

}

 

// Fired whenever a new group is added to the Accordion

groupAddedEvent(e){

if (e.group)

console.log("groupAdded: " + e.group.text);

}

}

 

bootstrap(AppComponent);

//

// app.template.html file

//

 

<style>

.group-content

{

padding: 50px 0;

border: thin solid #bbbbbb;

padding: 10px;

border-top-color: transparent;

font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;

}

</style>

<div style="width:400px">

<iui-accordion [groups]="data" (groupAdded)="groupAddedEvent($event)" #accordion>

<iui-groupbox *ngFor="let group of data" text="{{group.text}}">

<div class="group-content">{{group.text}} Content</div>

</iui-groupbox>

</iui-accordion>

<br/>

<button (click)="addGroup()">Add Group</button>

</div>

In above code, we are adding a new group using the addGroup method. To access this method, at first we need to get a reference to the Accordion component. In HTML we are adding the #accordion variable, which is used to locate the Accordion within your application component.

After we have a reference to the Accordion component, we can get access to all public methods available.

Note In this example we are also setting a handler for groupAdded event. Whenever a new group is added, this event is fired. In our handler, the console window will show a message stating teh name of the group that is added.

Here is a list of available methods:

  • addGroup - inserts a new group at the end of Accordion
  • clearGroups - removes all groups from the Accordion
  • insertGroupAfter - inserts a new group in a position after specified group
  • insertGroupBefore - inserts a new group in a position before specified group
  • insertGroupAt - inserts a new group at specified position
  • removeGroup - removes the specified group from the Accordion

How to Customize the Accordion Appearance

Each part of the accordion is fully customizable. There are many CSS classes for each part of the Accordion, specified in a style sheet. By changing these classes in your code, you can modify the appearance of the accordion.

Accordion appearance can be changed using a set of CSS classes for all parts, or a specific class for a specific part. For example, all accordion groups can appear in different color.

From sample shown here, you can notice that there are several animations:

  • expand marker - appears when group is expanding, at beginning of group header
  • expand box - changes its appearance from + to - and vice versa, when group is expanding or collapsing
  • content panel visibility - changes when group is expanding or collapsing, from hidden to fully visible and vice versa

All these animations are done using CSS3, there are several animations classes present in accordion style sheet. By modifying these classes, you can change current animations by adding your own custom animations.

Conclusion

This is a brief introduction to the IntegralUI Accordion for Angular 2, showing only basic features.

The Accordion component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.