LIDOR SYSTEMS

Advanced User Interface Controls and Components

Add Group Dynamically with Context Menu in Angular Accordion

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.

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

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.

How to Attach a Context Menu to the Accordion

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;
}
                            

Conclusion

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.

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.