How to open accordion tab on page load

1
votes

I want to open tab on page load by default. Right now it is collapsed and to open accordion tab I have to click on the button. I do not want to click on button every time to open the tab.

<div><p-accordion >
  <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
  </p-accordionTab>
</p-accordion>
</div>

Pulled from comment:

open]= true it is not working Uncaught Error: Template parse errors: Can't bind to 'open' since it isn't a known property of 'p-accordionTab'. 1. If 'p-accordionTab' is an Angular component and it has 'open' input, then verify that it is part of this module. 2. If 'p-accordionTab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<div><p-accordion >

3
javascriptangularaccordion
Add the logic whatever you do in your button click, inside ngAfterViewInit() lifecycle hook. – Ashish Ranjan
either what xyz said, or you add an Input() open property in your PAccordionTabComponent and then call it with <p-accordionTab header="Add Detail" [open]="true"> – Bernard Pagoaga
I dont have any button it is accordion button ..I have not written any code for that – sandy
[open]= true it is not working Uncaught Error: Template parse errors: Can't bind to 'open' since it isn't a known property of 'p-accordionTab'. 1. If 'p-accordionTab' is an Angular component and it has 'open' input, then verify that it is part of this module. 2. If 'p-accordionTab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<div><p-accordion > – sandy
Seems like a duplicate of this to me here stackoverflow.com/q/37092876/125981 but the markup here differs a bit so I did not vote it that way. – Mark Schultheiss

3 Answers

0
votes

You haven't provided enough code to provide a complete and tested answer, but basically what you want to do is apply an ID to the accordion with the # syntax (#accord), then use the ViewChild decorator in your code to provide a variable reference to that accordion, and then call the open() method on that reference in your OnInit method.

Something like this:

<div><p-accordion #accord>
  <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
  </p-accordionTab>
</p-accordion>
</div>

Then in your variable definitions:

  @ViewChild('accord')
  private accord: Accordion;

And in OnInit:

ngOnInit() {
    this.accord.open();
    // or this.accord.tabs[0].selected = true;
}

I'm not sure the exact syntax for Accordion - I'm assuming you're using PrimeNG Accordion however you haven't stated that, so it's hard to solve your problem exactly, but hopefully this points you in the right direction.

If you console.log("this.accord: ",this.accord); you'll get all the methods and attributes for the Accordion and can hopefully find the exactly one you need to use to do what you're trying to do.

0
votes

If you need to open first tab by default, then add activeIndex="0" in the the main parent element. In above case it would be like this

<p-accordion #accord activeIndex="0">
    <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
    </p-accordionTab>
</p-accordion>

Note: Grabbed from here