Angular 2 Accordion

Angular 2 accordion allows us to display HTM content in collapsible panels.

angular 2 accordion example
angular 2 accordion example

Angular 2 accordion used generally to show contents in a part of the web page.

live example at the end of the article

try angular 2 accordion
try angular 2 accordion

By clicking on headers the content of a specific panel is opened or closed. (Expand/collapse)

Build accordion with angular 2
Build accordion with angular 2

Include bootstrap before we start (it’s easy : ) )

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” rel=”stylesheet”>

Main accordion app code source:

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

import {Accordion, AccordionGroup} from './accordion';

@Component({
    selector: 'my-app',
    template:`
                <p>
                  <button type="button" class="btn btn-default" (click)="removeAngular2AccordionGroup()">
                    Remove a group from the dynamic content!
                  </button>
                   <button type="button" class="btn btn-default" (click)="addAngular2AccordionGroup()">
                    Add Content!
                  </button>
                </p>

                <accordion>
                  <accordion-group heading="First Group Header " isGroupOpen="true">
                    Introduction
                  </accordion-group>
                  <accordion-group [heading]="group.heading" *ngFor="#group of groups">
                    {{group.content}}
                  </accordion-group>
                  <accordion-group heading="Last Group Header" [isGroupOpen]="isGroupOpen">
                    Additional Information
                  </accordion-group>
                </accordion>
             `,

    directives: [Accordion, AccordionGroup]
})
export class Angular2Accordion  {
    isGroupOpen = false;

    groups: Array<any> = [
        {
            heading: 'Angular2Accordion Dynamic Content A',
            content: ' I’m a dynamic content to show in angular 2 accordion : )'
        },
        {
            heading: 'Angular2Accordion Dynamic Content B',
            content: 'I’m a dynamic content to show in angular 2 accordion : )'
        },
        {
            heading: 'Angular2Accordion HTML Content C',
            content: 'I’m a dynamic content to show in angular 2 accordion : ) '
        }
    ];

    removeAngular2AccordionGroup() {
        this.groups.splice(1,1);
    }

    addAngular2AccordionGroup() {
        let accordionGroupContent = {heading:'Hi New Content !', content:'Content angular 2 accordion '};
        this.groups.splice(1,0,accordionGroupContent);
    }
}

Our example uses Typescript as programming language.

angular-2-ui-framework

all files from here: angular-2-accordion

angular 2 accordion