displaying alert message in angular when move to other tab-CodePudding

I'm fairly new to Angular and need to solve seems to be simple problem: show alert or confirmation message on navigating between tabs in angular bootstrap. the issue is when moving to other tab,the tab will open first then showing alert message, if clicked on cancel it will back to the previous tab, what I want simply is to not leave the current tab until click on confirmation to leave

 <ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" >
  
        <li ngbNavItem="docs">
          <a ngbNavLink  (click)="navigateTab('docs')">
            
            <span [data-feather]="'file-text'"></span>Documents</a>
          <ng-template ngbNavContent>
            <p>
             any content
            </p>
          </ng-template>
        </li>
        <li ngbNavItem="external">
          <a  ngbNavLink  (click)="navigateTab('external')">
            
            
            <span [data-feather]="'chrome'"></span> External
            Resource</a>
          <ng-template ngbNavContent>
            <p>
              any external link
            </p>
          </ng-template>
        </li>
      </ul>

      <div [ngbNavOutlet]="navWithIcons" ></div>

TS:

navigateTab(navTab:string){

if (navTab != this.currentTab) {

if (this.isInputUpdated) {//if there is an update on the current tab inputs then
      this.confirmationMessage(true,this.currentTab);
  this.isInputUpdated = false;
    }
this.currentTab = navTab;
}
}

CodePudding user response：

You can listen to navChange event on the ngbNav element and stop the event from propagating

<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab"  (navChange)="navChanged($event)">
...
</ul>

navChanged(event) {
  event.preventDefault()
}

Inside the confirmationMessage method, if clicked on confirm set active tab with the value of currentTab