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

Is it possible to have a multiple router-outlet in the same template? Yes, why not! We can use multiple router-outlets in the same template by configuring our routers and simply adds the router-outlet name. < div   class = "row" >    < div   class = "user" >      < router-outlet   name = "users" ></ router-outlet >    </ div >    < div   class = "detail" >      < router-outlet   name = "userDetail" ></ router-outlet >    </ div > </ div > And setups your route config and it looks like this. //Apps roots const   appRoots  = [    {  path:   '' ,  redirectTo:   '/dashboard' ,  pathMatch:   'full'  },    {  path:   'userDetail' ,  component:   UserDetailComponent  },  //Id is a Roots parameter. ...