Overview

Component a2-Accordion is a collection of panels displayed vertically.

Selector	Description
a2-accordion	Defines accordion component and its global configuration
a2-accordion-group	Defines single accordion panel group

a2-accordion

Inputs

Input	Type	Default	Description
closeOther	boolean	true	Defines if other panels should be closed when panel is opened
ignoreDisabled	boolean	false	Defines if disabled panels should be skipped in navigation

Outputs

Output	Type	Description
contentChange	EventEmitter of AccordionGroupState	Emits list of all available accordion groups every time when new group is added / removed from DOM
change	EventEmitter of AccordionChangeEvent	When group is closed or opened emits its name and its current state
navigation	EventEmitter of AccordionNavigationEvent	If closeOther is set to true emits names of current, next and previous opened groups. Can be used for wizard implementation.

Methods

Method	Signature	Description
open	open(name: string): void	Allow to open given group by its name.
close	close(name: string): void	Allow to close given group by its name.

a2-accordion-group

Inputs

Input	Type	Default	Description
opened	boolean	false	Defines if given group should be opened
disabled	boolean	false	Defines if given group should be disabled
name	string	group-{id}	Defines custom group name
header	string	N/A	Defines group header text
type	string	default	Bootstrap panel type class name. One of the following "success", "info", "warning", "danger"

Templates

Selector	Description
a2-Header	Allow to define custom group header. When present header input for group is ignored.
a2-Footer	Allow to define custom group footer.

Types

export interface AccordionNavigationEvent {
    prev: string;
    current: string;
    next: string;
}

prev - previous group name

current - currently opened group name

next - name of next group to be opened

export interface AccordionChangeEvent {
    name: string;
    opened: boolean;
}

name - group name

opened - indicates if given group is opened

export interface AccordionGroupState {
    name: string;
    opened: boolean;
    disabled: boolean;
}

Represents initial state of accordion group.

name - group name

opened - indicates if given group is opened

disabled - indicates if given group is disabled

Example

HTML:

        <button (click)="prev();">Prev</button>
        <button (click)="next();">Next</button>
        <button (click)="toggleGroupPresence();">Toggle group presence</button>

        <a2-accordion #acc [closeOther]="true" [ignoreDisabled]="true">
            <a2-accordion-group [opened]="true" header="One" type="success">
                <ul>
                    <li>Example content</li>
                    <li>Example content</li>
                </ul>
            </a2-accordion-group>
            <a2-accordion-group [disabled]="true" type="info">
                <a2-header>
                    <div><b><i>Two</i></b></div>
                </a2-header>
                <ul>
                    <li>Example content</li>
                    <li>Example content</li>
                </ul>
                <a2-footer><i>Footer</i></a2-footer>
            </a2-accordion-group>
            <a2-accordion-group header="Three" type="danger">
                <ul>
                    <li>Example content</li>
                    <li>Example content</li>
                </ul>
            </a2-accordion-group>
            <a2-accordion-group *ngIf="groupPresent" header="Four">
                <ul>
                    <li>Example content</li>
                    <li>Example content</li>
                </ul>
            </a2-accordion-group>
        </a2-accordion>

TypeScript:

@Component({
//...
})
export class AccordionExampleComponent implements AfterContentInit {
    @ViewChild("acc")
    accordion: Accordion;
    groupPresent: boolean = true;
    accordionNavigationState: AccordionNavigationEvent;
    accordionContentState: Array<AccordionGroupState> = [];

    ngAfterContentInit(): any {
        this.accordion.navigation.subscribe($event => {
            this.accordionNavigationState = $event;
        });

        this.accordion.contentChange.subscribe($event => {
            this.accordionContentState = $event;
            this.accordion.open($event[0].name);
        });
    }

    next(): void {
        if (!this.accordionNavigationState.next) return;
        this.accordion.open(this.accordionNavigationState.next);
    }

    prev(): void {
        if (!this.accordionNavigationState.prev) return;
        this.accordion.open(this.accordionNavigationState.prev);
    }

    toggleGroupPresence(): void {
        this.groupPresent = !this.groupPresent;
    }
}