Navigation lock — master/detail

Child A carries the lock. A→B should prompt; B→A should not. The parent has no lock, so child↔child navigation only consults the active child.

Basic usage

Child B

No lock here. You can navigate away freely.

  
    
      
        <nav>
        
    
      
          <a routerLink="a" routerLinkActive="active">Child A (locked)</a>
        
    
      
          <a routerLink="b" routerLinkActive="active">Child B (free)</a>
        
    
      
        </nav>
        
    
      
        <router-outlet></router-outlet>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-master-detail-demo',
        
    
      
          templateUrl: './my-master-detail-demo.component.html',
        
    
      
          imports: [RouterLink, RouterLinkActive, RouterOutlet],
        
    
      
        })
        
    
      
        export class MyMasterDetailDemoComponent {}