Angular Router Extra Options

Find some of the route configurations.

1. enableTracing | withDebugTracing() : Enables logging of all internal navigation events to the console.

2. useHash | withHashLocation() : Provides the location strategy to use hash (#).

3. bindToComponentInputs | withComponentInputBinding() : Enables binding information from router states to directly input properties.

4. enableViewTransitions | withViewTransitions() : Enables view transition.

5. Example with RouterModule :

enableTracing, useHash, bindToComponentInputs and enableViewTransitions are used with RouterModule.

const routes: Routes = [ ];

const extraOptions: ExtraOptions = {

enableTracing: true,

useHash: true,

bindToComponentInputs: true,

enableViewTransitions: true

};

@NgModule({

imports: [

RouterModule.forRoot(routes, extraOptions)

],

------

})

export class AppRoutingModule { }

6. Example with standalone application:

withDebugTracing, withHashLocation, withComponentInputBinding and withViewTransitions are used with standalone application.

const appRoutes: Routes = [];

bootstrapApplication(AppComponent,

{

providers: [

provideRouter(appRoutes,

withDebugTracing(),

withHashLocation(),

withComponentInputBinding(),

withViewTransitions()

)

]

}

);