Advanced User Interface Controls and Components
Created: 14 April 2017
In general, all groups in Accordion component are created upfront. In some cases, you may need to add a new group on demand, that is dynamically when required. In this example, you will learn how to create a context menu with options to add new groups.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
By right-clicking in the Accordion space, a context menu will popup showing options where to add a new group. When an option is selected, a group is created and placed at specified position.
Note To simplify the example, the group content is excluded, showing only a one-line text. In real application, you can load custom HTML elements to each group on demand, from either a JSON file or a database.
In order to create a context menu, you need to use the ContextMenu directive. This directive is attachable to any HTML element or Angular component. You only need to specify the menu options and the functionality when an option is clicked.
In this example, the context menu has three options that when clicked create and add a new group either at the end of the list, above or below the currently selected group.
//
// app.module.ts
//
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntegralUIModule } from './integralui/integralui.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
IntegralUIModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts
//
import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['sample-styles.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;
@ViewChild('accordion') accordion: IntegralUIAccordion;
private data: Array<any>;
private selGroup: any = null;
private isNewGroupAdded: boolean = false;
private menuSettings: any = {
appRef: null,
items: []
}
constructor(){
this.data = [
{ text: 'Group 1' },
{ text: 'Group 2' },
{ text: 'Group 3' }
];
this.selGroup = this.data[0];
}
ngAfterViewInit(){
this.menuSettings = {
appRef: this.applicationRef,
items: [
{ id: 1, text: "Add Group" },
{ id: 2, text: "Insert Group Above" },
{ id: 3, text: "Insert Group Below" }
]
}
}
menuItemClick(e: any){
if (e.item){
// Create a new group
let newGroup: any = {
text: "Group " + (this.data.length+1).toString()
}
// Depending on selected option add the group at specified position
switch (e.item.id){
case 2:
this.accordion.insertGroupBefore(newGroup, this.accordion.selectedGroup);
break;
case 3:
this.accordion.insertGroupAfter(newGroup, this.accordion.selectedGroup);
break;
default:
this.accordion.addGroup(newGroup);
break;
}
this.isNewGroupAdded = true;
// Select the new group
this.accordion.selectGroup(newGroup);
}
}
}
//
// app.template.html
//
<div class="block" #application>
<iui-accordion [groups]="data" [selectedGroup]="selGroup" [iuiContextMenu]="menuSettings" (itemClick)="menuItemClick($event)" #accordion>
<iui-groupbox *ngFor="let group of data" text="{{group.text}}" [expandBoxType]="'arrow'">
<div class="group-content">Content of {{group.text}}</div>
</iui-groupbox>
</iui-accordion>
</div>
/*
* sample-styles.css
*/
.iui-contextmenu
{
width: 200px;
}
.block
{
width: 400px;
}
.group-content
{
padding: 50px 0;
border: thin solid #bbbbbb;
border-top-color: transparent;
text-align: center;
}
.iui-header-expand-box
{
top: 2px;
right: 2px;
}
There are different ways to add new groups dynamically to Angular Accordion. One way is to use a custom Context Menu with options to add groups at specific position in the Accordion.
The Accordion component is part of IntegralUI Web.