Anil Singh | Code-sample.com

What Is Router events? Whenever the root navigations, the router emits navigation events using Router.events property. The sequence of router events is - 1.        NavigationStart 2.        RouteConfigLoadStart 3.        RouteConfigLoadEnd 4.        RoutesRecognized 5.        GuardsCheckStart 6.        ChildActivationStart 7.        ActivationStart 8.        GuardsCheckEnd 9.        ResolveStart 10.    ResolveEnd 11.    ActivationEnd 12.    ChildActivationEnd 13.    NavigationEnd 14.    NavigationCancel 15.    NavigationError The Router events are also logged in the console when enableTracing option is enabled. The Nav...

What Is RouterState? RouterState is interface and it represents the state of the router. It looks like this. interface   RouterState   extends   Tree  {    snapshot :  RouterStateSnapshot    toString ():  string } It is also a tree of activated routes. We can access the current RouterState from anywhere in the Angular app using the Router service and the routerState property. For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html

What Is RouterLinkActive? The RouterLinkActive is a directive. To add the active CSS class to the element when the associated RouterLink becomes active (visually look like selected anchors). It is also works for both parent and child elements. @ Directive ({    selector:   '[routerLinkActive]' ,    exportAs:   'routerLinkActive' }) Consider the following example for active a link – < a   routerLink = "/user/detail"   routerLinkActive = "active-link" > User Detail </ a > You can also set more than one class and it look like this. < a   routerLink = "/user/detail"   routerLinkActive = "active-class1 active-class2" > User detail </ a > < a   routerLink = "/user/detail"  [ routerLinkActive ]= "['active-class1', 'active-class2']" > User detail </ a > For more detail kindly refer the link - https://www.code-sample.com/2018/05/angula...

What Is Router link? The Router-link is a directive and it used to link a specific part of your applications. @ Directive ({  selector:   ':not(a)[routerLink]'  }) Let explain the route configuration using the - {  path:   'user/:id' ,  component:   UserDetailComponent I the above rote configuration, when linking to this user/:id route, you use the RouterLink directive. If the link is static, you can use the directive as follows. < a   routerLink = "/user/id" >  See the User detail </ a > If you using dynamic values to generate the router link that you can pass an array of path segments. You can specify a route parameter like this. < a  [ routerLink ]= "['/user', user.id]" >    < span   class = "text-align" > {{ user.id }} </ span > {{ user.name }} </ a > You can set query params and fragment as follows. < a  [ routerLink ]= "['/user/id']...