Anil Singh | Code-sample.com

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']...

Configure Angular Routes- A router has no routes until you configure it. So you are configuring the Angular router for accessing your apps URLs.    //Composability and Grouping    //imports used for composing NgModules together.    imports:  [      BrowserModule ,      //enableTracing is used for debugging purposes only      //Enables the location strategy that uses the URL fragment instead of the history API.      RouterModule . forRoot ( appRoots , {  enableTracing:   true ,  useHash: false  })    ] For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html