Loupe - Log - Monitor - Resolve
Loupe / Developer's Guide / For JavaScript / Angular / Developer's Reference - Angular - Page Changes
In This Topic
    Developer's Reference - Angular - Page Changes
    In This Topic

    The Loupe Agent for Angular can be used to easily record each time the user navigates your Angular application by tracking RouterEvent events.  The recommended way to do this is to can subscribe to router events from within AppComponent or the AppRoutingModule:  The example below shows how the router is extended in your AppComponent to both initialize the Loupe agent and record a message during each navigation:

    import { LoupeService } from '@gibraltarsoftware/loupe-angular';
    
    @Component({
      selector: 'app-root', 
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    
      constructor(private readonly loupe: LoupeService) {    
        this.router.events
        .pipe(filter(x => x instanceof NavigationStart))
        .subscribe((evnt: RouterEvent) => {
          this.loupe.information(
            "Angular", "NavigationStart", evnt.url,
            null, null, null, null
          );
        });
      }
      
    }
    
    

     

    See Also