How to trigger PrimeNG Accordion Click programmatically in Angular 2.0?

Question

I have an accordion as shown below.

When the link is clicked, I'd need to trigger the click event of all p-accordianTab elements.

How is it possible?

<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
                <p-accordion [multiple]="true">
                    <div class="row" *ngFor="let category of result.Categories">                        

                            <p-accordionTab #accordianTab header="{{category.Name}}">

                            </p-accordionTab>                       

                    </div>
                </p-accordion>

I tried adding this "#accordionTab" to the element and accessing it from TypeScript but doesn't work:

@ViewChild('accordionTab') accordionTab: ElementRef;
 openCloseAllText: string = "Open";
 openCloseAll() {
        // get all accordions and click them
        this.openCloseAllText = this.openCloseAllText === "Open" ? "Close" : "Open";
        this.accordionTab.nativeElement.click();
    }

TypeError: Cannot read property 'nativeElement' of undefined

Answer 1

Why not just use the tabs-property of the accordion itself?

<p-accordion #accordion>
    <p-accordionTab header="Header Content">
         Body Content
    </p-accordionTab>
</p-accordion>

@ViewChild('accordion') accordion: Accordion;

closeAllAccordionTabs() {
    if(!isNullOrUndefined(this.accordion.tabs)){
        for(let tab of this.accordion.tabs) {
            if(tab.selected) tab.selected = false;
        }
    }
}

openAllAccordionTabs() {
    if(!isNullOrUndefined(this.accordion.tabs)){
        for(let tab of this.accordion.tabs) {
            if(!tab.selected) tab.selected = true;
        }
    }
}

Answer 2

I was able to get this working using the same approach as you but moving the template variable to an element inside a custom p-header, instead of on the p-accordion-Tab.

<p-accordionTab>
    <p-header>
        <span #header>
            Header Content
        </span>
    </p-header>
    Body Content
</p-accordionTab>

Their doc page has info on the bottom about using custom header content: https://www.primefaces.org/primeng/#/accordion

Answer 3

updated Martin Kronstad's answer for es6 w/ arrow functions:

  closeAllAccordionTabs() {
    if (this.accordion && this.accordion.tabs) {
      this.accordion.tabs.forEach(tab => tab.selected = false);
    }
  }

Answer 4

Here's an alternate method that doesn't require @ViewChild. Use this if your accordion is in an *ngIf and is only added to the DOM on certain conditions(In this case the @ViewChild is undefined and can't be set).

Use the activeIndex property:

<p-accordion [activeIndex]="openAccordion">

Put this variable in the component:

openAccordion = -1;

When you want to open the accordion set this.openAccordion to the index of the accordion tab you want to open. e.g.

this.openAccordion = 0;

or in a unit test as I'm using it:

fixture.componentInstance.openAccordion = 0;