[FIXED] PrimeNg TabView with ConfirmDialog

Issue

I’m trying to use PrimeNg TabView component along with confirmDialog unsuccessfully, here is my code:

<p-tabView (onChange)="onTabChange($event)" [(activeIndex)]="index">...</p-tabView> 


  onTabChange(event){
    this.confirmationService.confirm({
      message: 'Do you confirm ?',
      accept:  () => {
      this.index = event.index;
      },
      reject:() =>{        }
      });
   }

Do you have an idea on how to prevent or allow tab change using confirm dialog ?

Thanks

Solution

Based on similar solution for material design tabs, here is the solution for my issue:

  1. in html Declare a local variable referencing TabView DOM object:

    <p-tabView #onglets>...</p-tabView>

  2. in component.ts, change default function called when click on tab with specific
    function to match your case:

    @ViewChild('onglets') onglets: TabView;
    this.onglets.open = this.interceptOngletChange.bind(this);
    ...
    interceptOngletChange(event: Event, tab: TabPanel){
    const result = confirm(
    Do you really want to leave the tab?);
    return result && TabView.prototype.open.apply(this.onglets, argumentsList);
    });
    }

Answered By – Zakariaa.B

Answer Checked By – Mildred Charles (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published