Is there a way to safeguard against accidental modifications to MatTab without prior authorization?

Question

Is there a way to safeguard against accidental modifications to MatTab without prior authorization?

I need to delay the changing of the MatTab until a confirmation is provided. I am using MatDialog for this confirmation. The problem is that the tab switches before the user clicks "Yes" on the confirmation dialog.

For instance, when I try to switch from the income tab to the adjustment tab, I want the confirmation popup to appear first. However, currently, the popup only shows up after I have already moved to the adjustment tab.

https://i.sstatic.net/YVeiH.png

This is my component template:

<mat-tab-group (click)="tabClick($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    <app-spread></app-spread>
  </mat-tab>
</mat-tab-group>

This is the relevant method in my component ts file (onClick's method):

tabClick(clickEvent: any) {
    if (clickEvent.target.innerText != 'First') {
      this.confirm();
    }
  }
  
  public async confirm() {
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      maxHeight: '200px',
      maxWidth: '767px',
      width: '360px',
      disableClose: true,
      data: {
        title: 'Confirmation Message',
        content:
          'There are valid statements that are not Final. Set the statements as Final?'
      }
    });
    
    const res = dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        //TODO need to change the tab
      } else {
        //TODO no need to change the tab
      }
    });
  }

angular typescript angular-material mat-tab

Answer 1

Answer №1

A while back, I experimented with creating a "mat-tab" in this Stack Overflow thread

I believe that you can easily adapt this by simply modifying the function

<mat-tab-group #tabgroup style="margin-bottom:5px;" 
               animationDuration="0"   mat-align-tabs="start"
               (selectedIndexChange)="change(tabgroup,$event)">
...
</mat-tab-group>

Here is the modified function called 'change':

  change(tab:any,index:number)
  {
    if (tab.selectedIndex!=this.indexOld){
      const dialogRef = this.dialog.open(....)
      const res = dialogRef.afterClosed().subscribe(result => {
        if (result === 1) {
           this.index=index;
        } else {
           tab.selectedIndex=this.indexOld;
        }
      });
    }
    else
    {
       this.index=index;
    }
  }

You can view the code in action on StackBlitz where I have used a confirm dialog.

Update: There may be issues when using a mat-dialog.

Another approach involves overriding the behavior of the mat-tab-group

We need to adjust the _handleClick function of the mat-tab-group, (see this function in github) and the function _handleKeydown of the mat-header (see this function in github

It's a bit complex, but all we need to do is obtain the mat-group using ViewChild (I use {static:true} because my tabgroup is always visible).

@ViewChild('tabgroup', { static: true }) tabgroup: MatTabGroup;

Then, in the ngOnInit (if not using static:true, we use ngAfterViewInit), we re-implement the function by first casting this.tabgroup to any type

Firstly, let's define a function called alertDialog

  alertDialog(index:number,tab:MatTab,tabHeader:any,)
  {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    const res = dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        tabHeader.focusIndex = index;

        if (!tab.disabled) {
          this.tabgroup.selectedIndex = index;
        }
      }
    });

  }

Then, in ngOnInit we write

ngOnInit(){
    (this.tabgroup as any)._handleClick = (
      tab: MatTab,
      tabHeader: any,
      index: number
    ) => {
      if (this.tabgroup.selectedIndex != index)
        this.alertDialog(index, tab, tabHeader);
    };
}

To override the _handleKeydown function, wrap everything in a setTimeout to allow Angular time to render the mat-tab-header

  ngOnInit() {
    ....
    setTimeout(() => {
      const tabHeader = (this.tabgroup as any)._tabHeader;
      tabHeader._handleKeydown = (event: KeyboardEvent) => {
        if (hasModifierKey(event)) {
          return;
        }

        switch (event.keyCode) {
          case ENTER:
          case SPACE:
            if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
              const item = tabHeader._items.get(tabHeader.focusIndex);
              this.alertDialog(tabHeader.focusIndex, item, tabHeader);
            }
            break;
          default:
            tabHeader._keyManager.onKeydown(event);
        }
      };
    });

You can view this implementation on a new StackBlitz page

Answer 2

A while back, I experimented with creating a "mat-tab" in this Stack Overflow thread

I believe that you can easily adapt this by simply modifying the function

<mat-tab-group #tabgroup style="margin-bottom:5px;" 
               animationDuration="0"   mat-align-tabs="start"
               (selectedIndexChange)="change(tabgroup,$event)">
...
</mat-tab-group>

Here is the modified function called 'change':

  change(tab:any,index:number)
  {
    if (tab.selectedIndex!=this.indexOld){
      const dialogRef = this.dialog.open(....)
      const res = dialogRef.afterClosed().subscribe(result => {
        if (result === 1) {
           this.index=index;
        } else {
           tab.selectedIndex=this.indexOld;
        }
      });
    }
    else
    {
       this.index=index;
    }
  }

You can view the code in action on StackBlitz where I have used a confirm dialog.

Update: There may be issues when using a mat-dialog.

Another approach involves overriding the behavior of the mat-tab-group

We need to adjust the _handleClick function of the mat-tab-group, (see this function in github) and the function _handleKeydown of the mat-header (see this function in github

It's a bit complex, but all we need to do is obtain the mat-group using ViewChild (I use {static:true} because my tabgroup is always visible).

@ViewChild('tabgroup', { static: true }) tabgroup: MatTabGroup;

Then, in the ngOnInit (if not using static:true, we use ngAfterViewInit), we re-implement the function by first casting this.tabgroup to any type

Firstly, let's define a function called alertDialog

  alertDialog(index:number,tab:MatTab,tabHeader:any,)
  {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    const res = dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        tabHeader.focusIndex = index;

        if (!tab.disabled) {
          this.tabgroup.selectedIndex = index;
        }
      }
    });

  }

Then, in ngOnInit we write

ngOnInit(){
    (this.tabgroup as any)._handleClick = (
      tab: MatTab,
      tabHeader: any,
      index: number
    ) => {
      if (this.tabgroup.selectedIndex != index)
        this.alertDialog(index, tab, tabHeader);
    };
}

To override the _handleKeydown function, wrap everything in a setTimeout to allow Angular time to render the mat-tab-header

  ngOnInit() {
    ....
    setTimeout(() => {
      const tabHeader = (this.tabgroup as any)._tabHeader;
      tabHeader._handleKeydown = (event: KeyboardEvent) => {
        if (hasModifierKey(event)) {
          return;
        }

        switch (event.keyCode) {
          case ENTER:
          case SPACE:
            if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
              const item = tabHeader._items.get(tabHeader.focusIndex);
              this.alertDialog(tabHeader.focusIndex, item, tabHeader);
            }
            break;
          default:
            tabHeader._keyManager.onKeydown(event);
        }
      };
    });

You can view this implementation on a new StackBlitz page

Answer 3

Answer №2

Following the latest update of the answer, have you considered implementing a Directive?

@Directive({
  selector:'mat-tab-group',
})
export class MatTabGroupExtends implements OnInit{
  @Output() beforeChange:EventEmitter<any>=new EventEmitter<any;>()

  constructor(private tabgroup:MatTabGroup) {}
  ngOnInit()
  {
    if (this.beforeChange.observers.length && this.tabgroup)
    {
      setTimeout(() => {
        const tabHeader = (this.tabgroup as any)._tabHeader;
        tabHeader._handleKeydown = (event: KeyboardEvent) => {
          if (hasModifierKey(event)) {
            return;
          }

          switch (event.keyCode) {
            case ENTER:
            case SPACE:
              if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
                const item = tabHeader._items.get(tabHeader.focusIndex);
                if (!item.disabled)
                this.beforeChange.emit(tabHeader.focusIndex);
              }
              break;
            default:
              tabHeader._keyManager.onKeydown(event);
          }
        };
      });

      (this.tabgroup as any)._handleClick = (
        tab: MatTab,
        tabHeader: any,
        index: number
      ) => {
        if (this.tabgroup.selectedIndex != index && !tab.disabled)
        this.beforeChange.emit(index);
      };
    }
  }
}

Given that the selector is mat-tab-group, we can simplify its usage like so:

<!-- Note that "event" refers to the "index", and 
                 "tabgroup" is the template reference variable -->
<mat-tab-group #tabgroup (beforeChange)="alertDialog($event,tabgroup)">
   ...
</mat-tab-group>

 alertDialog(index:any,tabgroup:MatTabGroup) {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    const res = dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        tabgroup.selectedIndex=index
      }
    });
  }

Answer 4

Following the latest update of the answer, have you considered implementing a Directive?

@Directive({
  selector:'mat-tab-group',
})
export class MatTabGroupExtends implements OnInit{
  @Output() beforeChange:EventEmitter<any>=new EventEmitter<any;>()

  constructor(private tabgroup:MatTabGroup) {}
  ngOnInit()
  {
    if (this.beforeChange.observers.length && this.tabgroup)
    {
      setTimeout(() => {
        const tabHeader = (this.tabgroup as any)._tabHeader;
        tabHeader._handleKeydown = (event: KeyboardEvent) => {
          if (hasModifierKey(event)) {
            return;
          }

          switch (event.keyCode) {
            case ENTER:
            case SPACE:
              if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
                const item = tabHeader._items.get(tabHeader.focusIndex);
                if (!item.disabled)
                this.beforeChange.emit(tabHeader.focusIndex);
              }
              break;
            default:
              tabHeader._keyManager.onKeydown(event);
          }
        };
      });

      (this.tabgroup as any)._handleClick = (
        tab: MatTab,
        tabHeader: any,
        index: number
      ) => {
        if (this.tabgroup.selectedIndex != index && !tab.disabled)
        this.beforeChange.emit(index);
      };
    }
  }
}

Given that the selector is mat-tab-group, we can simplify its usage like so:

<!-- Note that "event" refers to the "index", and 
                 "tabgroup" is the template reference variable -->
<mat-tab-group #tabgroup (beforeChange)="alertDialog($event,tabgroup)">
   ...
</mat-tab-group>

 alertDialog(index:any,tabgroup:MatTabGroup) {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    const res = dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        tabgroup.selectedIndex=index
      }
    });
  }

Answer 5

Answer №3

My response is inspired by Eliseo's exceptional solutions with some slight modifications, eliminating the need for setTimeout and reducing the use of ANY to a minimum.

import { AfterViewInit, Directive, EventEmitter, Output } from '@angular/core';
import { MatTab, MatTabGroup } from '@angular/material/tabs';
import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';


@Directive({
  selector: 'mat-tab-group[matTabGroupWithOuterChangeHandler]',
})
export class MatTabGroupWithOuterChangeHandlerDirective implements AfterViewInit {
  @Output() outerChangeTabHandler: EventEmitter<number> = new EventEmitter<number>();

  constructor(private tabGroup: MatTabGroup) {}

  ngAfterViewInit(): void {
    this.setCustomHandleKeyPress();
    this.setCustomHandleClick();
  }

  private setCustomHandleKeyPress(): void {
    const tabHeader = (this.tabGroup as any)._tabHeader;
    tabHeader._handleKeydown = (event: KeyboardEvent) => {
      if (hasModifierKey(event)) {
        return;
      }

      switch (event.keyCode) {
        case ENTER:
        case SPACE:
          if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
            const item = tabHeader._items.get(tabHeader.focusIndex);
            if (!item.disabled) {
              this.outerChangeTabHandler.emit(tabHeader.focusIndex);
            }
          }
          break;
        default:
          tabHeader._keyManager.onKeydown(event);
      }
    };
  }

  private setCustomHandleClick(): void {
    (this.tabGroup as any)._handleClick = (tab: MatTab, _, index: number) => {
      if (this.tabGroup.selectedIndex !== index && !tab.disabled) {
        this.outerChangeTabHandler.emit(index);
      }
    };
  }
}

html

<mat-tab-group 
    matTabGroupWithOuterChangeHandler
    [(selectedIndex)]="selectedIndex"
    (outerChangeTabHandler)="showLoseChangesModal($event)">
   ...
</mat-tab-group>

ts

public showLoseChangesModal(index:number) {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    dialogRef.afterClosed().subscribe((ok) => {
      if (ok) {
        this.selectedIndex=index;
        this.cdr.detectChanges(); // if OnPush strategy
      }
    });
  }

Answer 6

My response is inspired by Eliseo's exceptional solutions with some slight modifications, eliminating the need for setTimeout and reducing the use of ANY to a minimum.

import { AfterViewInit, Directive, EventEmitter, Output } from '@angular/core';
import { MatTab, MatTabGroup } from '@angular/material/tabs';
import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';


@Directive({
  selector: 'mat-tab-group[matTabGroupWithOuterChangeHandler]',
})
export class MatTabGroupWithOuterChangeHandlerDirective implements AfterViewInit {
  @Output() outerChangeTabHandler: EventEmitter<number> = new EventEmitter<number>();

  constructor(private tabGroup: MatTabGroup) {}

  ngAfterViewInit(): void {
    this.setCustomHandleKeyPress();
    this.setCustomHandleClick();
  }

  private setCustomHandleKeyPress(): void {
    const tabHeader = (this.tabGroup as any)._tabHeader;
    tabHeader._handleKeydown = (event: KeyboardEvent) => {
      if (hasModifierKey(event)) {
        return;
      }

      switch (event.keyCode) {
        case ENTER:
        case SPACE:
          if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
            const item = tabHeader._items.get(tabHeader.focusIndex);
            if (!item.disabled) {
              this.outerChangeTabHandler.emit(tabHeader.focusIndex);
            }
          }
          break;
        default:
          tabHeader._keyManager.onKeydown(event);
      }
    };
  }

  private setCustomHandleClick(): void {
    (this.tabGroup as any)._handleClick = (tab: MatTab, _, index: number) => {
      if (this.tabGroup.selectedIndex !== index && !tab.disabled) {
        this.outerChangeTabHandler.emit(index);
      }
    };
  }
}

html

<mat-tab-group 
    matTabGroupWithOuterChangeHandler
    [(selectedIndex)]="selectedIndex"
    (outerChangeTabHandler)="showLoseChangesModal($event)">
   ...
</mat-tab-group>

ts

public showLoseChangesModal(index:number) {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    dialogRef.afterClosed().subscribe((ok) => {
      if (ok) {
        this.selectedIndex=index;
        this.cdr.detectChanges(); // if OnPush strategy
      }
    });
  }

Is there a way to safeguard against accidental modifications to MatTab without prior authorization?

Answer №1

Answer №2

Answer №3

Similar questions

In order for the expansion parameter to be successfully used, it must be either of tuple type or passed to the

Implementing conditional requirements using *ngIf in Angular: A step-by-step guide

What could be causing this error in a new Next.js application?

Implementing TypeScript with react-router-dom v6 and using withRouter for class components

Integrate a service component into another service component by utilizing module exports

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Is it possible to include a submenu within a md-tooltip?

What is the best way to sort an array based on a person's name?

Tips for efficiently verifying existence of object attribute in conditional object type using Typescript

Utilizing Async/Await with Node.js for Seamless MySQL Integration

"Building a tree structure from a one-dimensional array in Angular: A step-by-step

Adjust the size of an event in the Angular Full Calendar with Chronofy, while utilizing constraints to control the drag and drop functionality

Definition file for Typescript d.ts that includes optional properties in a function

Attempting to verify if a function is being invoked within a subscription, but finding that it never gets activated

Understanding how to leverage styles.module.scss for implementing personalized styling within react-big-calendar

Implement the addition of subcollections to a unified identification document in Firestore

Angular - Navigate to Login Page post registration and display a confirmation message

Angular - encountering challenges when implementing the native Web Speech API

Can you provide information on the latest stable release of animations for Angular 4?

Creating mock objects with Jest