Primeng: p-panel toggle on header click

[rashnk]

How can i toggle p-panel on header click, now it toggle only when i click plus and minus icon

[rafa-as]

For now is not possible @rashnk. If you want to achieve this behaviour you should use the collapsed attribute and manage manually the value.
Take care about this solution because if you use this way, you loose the event onBeforeToggle. This seems to be a bug, what do you think @cagataycivici ?

Anyway I think this is a common behaviour that can be an option of this component.

[rafa-as]

@cagataycivici if you want I can do the PR, it's very easy, just use the following code:

On the template (panel.ts):

(@panelContent.start)="onToggleStart($event)"

On the component (panel.ts):

onToggleStart(event: Event) {
  this.animating = true;
  this.onBeforeToggle.emit({originalEvent: event, collapsed: this.collapsed});
}

And remove the lines 85-86 from the panel.ts

[cagataycivici]

Added toggler property;

<p-panel toggler="icon | header"

Setting it to header gives you the required behavior.

[sridhark158]

.ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon{
width:100% !important;
}

after that

span.pi-minus{
float:right !important;
}
span.pi-plus{
float:right !important;
}
this css trick will work