Odtnhj

I have a component in which I use an accordion.I want to have multiple tabs enabled and a custom activeIndex.
Here is my code :

<p-accordion [activeIndex]="index" [multiple]="true">
 <p-accordionTab header="1st tab">
 1st tab content
 </p-accordionTab>
 <p-accordionTab header="2nd tab">
 2nd tab content
 </p-accordionTab>
</p-accordion>

Here is my component class

@Component(
 selector: 'app-panel',
 templateUrl: './panel.component.html',
 styleUrls: ['./panel.component.css']
)
export class PanelComponent implements OnInit 

 index:number = 1;
 constructor() 
 


 ngOnInit() 
 //this.index = 0;
 

The problem appears If I want to include both [activeIndex] and [multiple].Any ideas why this is happening?

I use PrimeNG 7 and angular 7

You can't be using both. It's either one or the other.

multiple: When enabled, multiple tabs can be activated at the same time.

activeIndex: Index of the active tab or an array of indexes to change selected tab programmatically.

Because of the way they work, they will be contradicting each other. One is to have several open, the other one is to have just one open.

https://www.primefaces.org/primeng/#/accordion

For example:

Imagine you have a function that says openDoor() and one that it's called closedDoor() if you use them at the SAME TIME they will contradict to each other.

This is what you need:

<p-accordion [multiple]="true" >
 <p-accordionTab header="Header 1" [selected]="true">
 Content 1
 </p-accordionTab>
 <p-accordionTab header="Header 2">
 Content 2
 </p-accordionTab>
 <p-accordionTab header="Header 3">
 Content 3 
 </p-accordionTab>
</p-accordion>

Docs says:

Index of the active tab or an array of indexes to change selected tab
programmatically.

Here is the related code where it sets activeTabs from _activeIndex

 updateSelectionState() 
 if (this.tabs && this.tabs.length && this._activeIndex != null) 
 for (let i = 0; i < this.tabs.length; i++) 
 let selected = this.multiple ? this._activeIndex.includes(i) : (i === this._activeIndex);
 let changed = selected !== this.tabs[i].selected;

 if (changed) 
 this.tabs[i].animating = true;
 

 this.tabs[i].selected = selected;
 this.tabs[i].selectedChange.emit(selected);
 
 
 

So, for multiple tabs, you should be using an array of indices, not a number.

@Component(
 selector: 'app-panel',
 templateUrl: './panel.component.html',
 styleUrls: ['./panel.component.css']
)
export class PanelComponent implements OnInit 

 indices: number = [1, 2];
 constructor() 
 


 ngOnInit() 
 //this.index = 0;
 

If you are wondering, this._activeIndex.includes(i) this is where your error comes from.