TabView with Confirmation Popup from PrimeNg

Question

TabView with Confirmation Popup from PrimeNg

I'm having trouble making the PrimeNg TabView component work with a confirmDialog. Here's my code:

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


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

Any suggestions on how to handle tab change confirmation using a dialog box?

Thanks

javascript angular typescript primeng tabview

Answer 1

Answer №1

Referencing a similar solution for material design tabs, I found the resolution to my problem:

In your HTML file, declare a local variable that references the TabView DOM object:

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

In the component.ts file, modify the default function triggered when clicking on a tab with a specific function that suits your requirements:

@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);
});

Answer 2

Referencing a similar solution for material design tabs, I found the resolution to my problem:

In your HTML file, declare a local variable that references the TabView DOM object:

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

In the component.ts file, modify the default function triggered when clicking on a tab with a specific function that suits your requirements:

@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);
});

Answer 3

Answer №2

I encountered a similar issue where I needed to display a dialog before changing tabs.
Here is my solution:

HTML

<p-tabView #tabView (onChange)="onChange($event)" />

TypeScript

@ViewChild('tabView') tabView: TabView;

  onChange(event: any) {

    const previousTab = this.tabView.tabs[this.prevIndex]; // storing the previous index
    previousTab.selected = true;
    const selectedTab = this.tabView.tabs[event.index];
    selectedTab.selected = false;
    this.tabView.activeIndex = this.prevIndex;
    this.nextIndex= event.index;
  }

  GoToNextTab() {

    this.tabView.activeIndex = this.nextIndex;
    this.prevIndex= this.nextIndex;
    this.tabView.open(undefined, this.tabView.tabs[this.nextIndex]);
  }

By using this code, you can switch tabs without altering the tab styles.

Answer 4

I encountered a similar issue where I needed to display a dialog before changing tabs.
Here is my solution:

HTML

<p-tabView #tabView (onChange)="onChange($event)" />

TypeScript

@ViewChild('tabView') tabView: TabView;

  onChange(event: any) {

    const previousTab = this.tabView.tabs[this.prevIndex]; // storing the previous index
    previousTab.selected = true;
    const selectedTab = this.tabView.tabs[event.index];
    selectedTab.selected = false;
    this.tabView.activeIndex = this.prevIndex;
    this.nextIndex= event.index;
  }

  GoToNextTab() {

    this.tabView.activeIndex = this.nextIndex;
    this.prevIndex= this.nextIndex;
    this.tabView.open(undefined, this.tabView.tabs[this.nextIndex]);
  }

By using this code, you can switch tabs without altering the tab styles.

Answer 5

Answer №3

I found the accepted solution to be effective, but there are a few additional steps needed for it to function properly.

First, make sure to add the initialization section in the afterViewInit method.

Next, ensure that the argumentsList is configured as follows: [event, tab]

Answer 6

I found the accepted solution to be effective, but there are a few additional steps needed for it to function properly.

First, make sure to add the initialization section in the afterViewInit method.

Next, ensure that the argumentsList is configured as follows: [event, tab]

TabView with Confirmation Popup from PrimeNg

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to animate a 3D render based on scrolling with JavaScript?

Unable to locate an element on the webpage due to a JavaScript-based error, which then becomes hidden after a few seconds. (Registration form)

Node.js is throwing an HPE_INVALID_CONTENT_LENGTH error when a HEAD request is made

What is the best way to choose all checkboxes identified by a two-dimensional array?

Error TS2339 occurs when attempting to migrate to TypeScript due to the absence of the 'PropTypes' property on the 'React' type

Ensure the clarity tabs labels have the padding-left CSS property added

Determine whether the last day of the month falls within the designated time frame, and

Transform a string containing square brackets and double quotes into an array

I would like a div element to slide up from the bottom of the page

A guide to displaying SVG graphics in a Jupyter notebook with the help of jsdom, D3, and IJavascript

What could be causing this ajax request to return a 400 error?

Utilize a helper function for all MongoDB/Meteor collections

Using an iframe to access HTTP content from an HTTPS website

Value in the loop not being computed accurately

When using navigator.mediaDevices.getUserMedia on an iPhone, the webcam is activated in fullscreen mode

A guide on extracting all form fields with the maxlength attribute using JavaScript

I encountered an error while attempting to lint my code because ESLint was not configured to ignore the

"Utilize AngularJS JavaScript to nest HTML elements within each other for dynamic web

Sending data from multiple HTML table rows at once to a Django model

Utilize JavaScript variables with jQuery: A simple guide