bsNavigationLock guards both router navigation and the browser's beforeunload when the canExit callback returns falsy. The callback receives a chance to inspect form state and ask the user to confirm.
Type something below, toggle "Allow exit" off, then click a different navbar item. Cancel the confirm — your text is still here.
<section bsNavigationLock [canExit]="canExit">
<input type="text" name="firstName" [(ngModel)]="firstName">
</section>
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsNavigationLockDirective } from '@mintplayer/ng-bootstrap/navigation-lock';
@Component({
selector: 'my-navigation-lock-demo',
templateUrl: './my-navigation-lock-demo.component.html',
imports: [FormsModule, BsNavigationLockDirective],
})
export class MyNavigationLockDemoComponent {
protected firstName = '';
protected canExit = (): boolean => {
return confirm('Are you sure you want to leave?');
};
}