How to cancel a component event from output properties

2 Likes

Good to see content by Chaz again. Why not just pass a Boolean input property to the child component though?

Yes, that would make sense in cases where you want to completely disable switching of tabs, and you don’t need to handle the event in some other way.
But imagine a consumer wants to use a dialog to warn the user that switching tabs will cause data loss. The app will still need an event to be emitted so they know when to show that dialog, and which tab to switch to if the user chooses to proceed.

1 Like

That sounds like a job for a route guard.

Not quite sure how a router guard can prevent tab switching a component you don’t own logic for?

Material has a similar issue.

Isn’t it possible to combine tabs with routes? We don’t always want to do this, but often it’s handy in itself, and in this case to be able to use route guards.

Why are we discussing 3rd party components? The article discusses custom components.

Maybe that’s the missing piece. If the tab component is something you’re creating in a library and you don’t know how the consumer will use it.

Routing with Angular Material Tabs is possible.

<nav mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet></router-outlet>

Here’s a StackBlitz workspace demoing it:
https://stackblitz.com/github/janders/angular-tab-router-with-children?file=src%2Fapp%2Fhome%2Fhome-routing.module.ts

It should be straightforward to add route guards.

I even think I’ve used route guards with Angular Material Tabs a couple of years ago.