Trigger a dialog box upon page transition through menu navigation in Angular 4

Question

Trigger a dialog box upon page transition through menu navigation in Angular 4

I need assistance with my Angular 4 application. I am trying to implement a dialog box on the editionPage that prompts users to confirm before leaving the page.

Currently, I have a button that opens the dialog when clicked to go back to the previous page. However, I also want to trigger the dialog when clicking on a button from the sidebar menu.

This is an example of my sidebar menu:

<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}">
<ul class="list-group">
    <a routerLink="/first" [routerLinkActive]="['router-link-active']" class="list-group-item">
        <div class="titleMenu first" >{{ 'first' | translate }}</div>
    </a>
    <a routerLink="/tests" [routerLinkActive]="['router-link-active']" class="list-group-item">
        <div class="titleMenu">{{ 'Tests' | translate }}</div>
    </a>
</ul>
</nav>

To open the modal dialog, I use the following code:

this.bsModalRef = this.modalService.show(DialogSaveEditComponent);

I initially tried using a guard with CanDeactivate, but it did not work as expected because the page would change before the user could choose an option in the dialog.

If you have any suggestions on how I can resolve this issue, please let me know.

EDIT I have updated my approach by calling a function to open the dialog when a button from the menu is clicked. However, due to

routerLink="/first" [routerLinkActive]="['router-link-active']"

, the page changes before the dialog appears. Is there a way to delay the page change until after the dialog option is selected or cancel the page change altogether?

angular typescript dialog modal-dialog

Answer 1

Answer №1

If you want to trigger a modal at the end of navigation, you can achieve this by utilizing the following code snippet:

this.router.events.subscribe(
        event => {
            if(event instanceof NavigationEnd && event.url.startsWith('YOUR URL')) {
               //DISPLAY YOUR MODAL HERE
            } 
        }
    )

Answer 2

If you want to trigger a modal at the end of navigation, you can achieve this by utilizing the following code snippet:

this.router.events.subscribe(
        event => {
            if(event instanceof NavigationEnd && event.url.startsWith('YOUR URL')) {
               //DISPLAY YOUR MODAL HERE
            } 
        }
    )

Answer 3

Answer №2

I found success in achieving my goal by implementing a guard to prevent users from changing pages.

Below is the implementation of the new guard:

@Injectable()
export class SaveEditGuard implements CanDeactivate<ConfirmDialogSaveBatch> {
    sub: Subscription;
    result: boolean;

constructor(private router: Router, private confirmDialogService: ConfirmDialogSaveBatchService, private datasService: DatasService) {

}

canDeactivate(component: ConfirmDialogSaveBatch, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
              nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if(!this.datasService.clickOnSaveButton){
        this.confirmDialogService.confirm();
    }

    return this.datasService.returnSaveEditValue$;
}
}

When a user clicks on the save button, I ensure that the dialog is not displayed. By setting

this.datasService.clickOnSaveButton

and returnSaveEditValue to true upon clicking the save button, we allow the user to exit the page seamlessly.

If the user attempts to leave the page through the menu, the dialog opens and awaits a response due to a ReplaySubject<boolean>.

The following code is implemented in the service:

public returnSaveEditValue = new ReplaySubject<boolean>(1);
public clickOnSaveButton: boolean = false;


public notifyRefreshDatas(data: any) {
    if (data) {
        this.subject.next(data);
    }
}

setReturnSaveEditValue(val: boolean){
    this.returnSaveEditValue.next(val);
}

get returnSaveEditValue$() {
    return this.returnSaveEditValue.asObservable();
}

Upon a user clicking on save, the observable variable is set to true using the function:

this.datasService.setReturnSaveEditValue(true);

. To handle subsequent interactions where the user may want to quit the page or display a new dialog, the ReplaySubject is reinitialized with:

this.datasService.returnSaveEditValue = new ReplaySubject<boolean>(1);

. This ensures that if the user cancels an action and tries to leave the page again, the app waits for a response from the dialog.

To enable calling the dialog from anywhere, a dedicated dialog service was created. Within this service, there is a function responsible for invoking and opening the dialog.

Answer 4

I found success in achieving my goal by implementing a guard to prevent users from changing pages.

Below is the implementation of the new guard:

@Injectable()
export class SaveEditGuard implements CanDeactivate<ConfirmDialogSaveBatch> {
    sub: Subscription;
    result: boolean;

constructor(private router: Router, private confirmDialogService: ConfirmDialogSaveBatchService, private datasService: DatasService) {

}

canDeactivate(component: ConfirmDialogSaveBatch, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
              nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if(!this.datasService.clickOnSaveButton){
        this.confirmDialogService.confirm();
    }

    return this.datasService.returnSaveEditValue$;
}
}

When a user clicks on the save button, I ensure that the dialog is not displayed. By setting

this.datasService.clickOnSaveButton

and returnSaveEditValue to true upon clicking the save button, we allow the user to exit the page seamlessly.

If the user attempts to leave the page through the menu, the dialog opens and awaits a response due to a ReplaySubject<boolean>.

The following code is implemented in the service:

public returnSaveEditValue = new ReplaySubject<boolean>(1);
public clickOnSaveButton: boolean = false;


public notifyRefreshDatas(data: any) {
    if (data) {
        this.subject.next(data);
    }
}

setReturnSaveEditValue(val: boolean){
    this.returnSaveEditValue.next(val);
}

get returnSaveEditValue$() {
    return this.returnSaveEditValue.asObservable();
}

Upon a user clicking on save, the observable variable is set to true using the function:

this.datasService.setReturnSaveEditValue(true);

. To handle subsequent interactions where the user may want to quit the page or display a new dialog, the ReplaySubject is reinitialized with:

this.datasService.returnSaveEditValue = new ReplaySubject<boolean>(1);

. This ensures that if the user cancels an action and tries to leave the page again, the app waits for a response from the dialog.

To enable calling the dialog from anywhere, a dedicated dialog service was created. Within this service, there is a function responsible for invoking and opening the dialog.

Trigger a dialog box upon page transition through menu navigation in Angular 4

Answer №1

Answer №2

Similar questions

What is the best way to utilize @Input in components that have been generated using ComponentFactoryResolver?

Issue encountered in Angular-CLI when running the command "ng e2e": inability to access localStorage in protractor tests due to ts-node limitations

Error message alert - Subscription unable to capture observation

Uncertain of the cause for the Angular error; baffled by its

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Sorting elements with a custom selector using Angular's ViewChild

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Identifying the web browser by utilizing the UserAgent detection method

Scheduling emails using Node JS

Tips for extracting a specific key value from JSON data, eliminating duplicates, and adding them to an array in Angular 6 without using a for loop

The parameter type 'string | null' cannot be assigned to the value function 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'

What's the process for validating i18n dictionaries using TypeScript?

Enhance your React application by using a personalized hook that allows you to trigger a function

Optimal approach to configuring Spring Boot and Angular for seamless communication with Facebook Marketing API

Tips for utilizing the keyword 'this' within a Promise

Creating a data structure that consists of pairs of elements, inspired by the alignment of domino bricks, using TypeScript syntax

Error in Node.js with MongoDB: Array of OptionalId<Document> Typescript typings

What is the best way to set up a variable in Typescript that will be assigned the value of an asynchronous request once it is completed?

Tips for creating a seamless merge from background color to a pristine white hue

Can you explain the distinction between initially connecting the subject to the observable and doing so at the end, considering that they both operate asynchronously?