Search code examples
javascriptangularprimeng

How to detect PrimeNG sidebar close icon and other button clicks within the sidebar

Im trying to revert the changes if user clicks on close icon and save it if clicked on save button. But in PrimeNG Sidebar documentation i cant find the way to handle both the click events separately. Is it possible to do so?

Sidebar

Solution

  • I think you are overthinking things. The close button shown by the PrimeNG variable showCloseIcon is handled by PrimeNG itself. All it does is close the sidebar element. If you want to code custom behaviour you will have to code your own buttons.

    For the closing behaviour of the PrimeNG close button you can hook into the onHide event and couple a function to that. For the save button you simply hook into the onClick as with any other Angular event.

    So in code: HTML

    <p-sidebar [(visible)]="display" (onHide)="close()">
  <!-- Your form -->
  <button (click)="save()">Save</button>
</p-sidebar>

    HTML in case of a custom close button

    <p-sidebar [(visible)]="display">
  <button (click)="close()"><span class="x-button">&times;</span></button>
  <!-- Your form -->
  <button (click)="save()">Save</button>
</p-sidebar>

    CSS for button

    span .x-button {
    color:gray;
    opacity:0.7;
    font-size:1.5em;
}

    JavaScript

    function save() {...}
function close() {...//set display to false and do what you need to do}

    Hope this helps!