I have a sidebar with below navigation links and these links are inside a child module called "login". so when i click on classroom it is directing to login/classroom which is correct but when i click on assignments it is adding assignments to active url which is login/classroom/assignments. I need it to be login/assignments and not append to current url. How can it be achieved.
**component.html**
<div class="profileimg"></div>
<span class="user">{{username}}</span>
<a [routerLink]="'classroom'">ClassRoom</a>
<a [routerLink]="'assignments'">Assignments</a>
<a [routerLink]="'scores'">Scores</a>
<a [routerLink]="'myprofiles'">My Profiles</a>
router.module.ts
{ path: '', component: AfterloginComponent },
{ path: 'classroom' ,component: ClassroomComponent },
{ path: 'assignments', component: AssignmentsComponent },
{ path: 'scores', component: ScoresComponent }
If these links are in a component that's part of the root module, then just use an absolute path by prepending the link with a forward slash and using the full path.
<a [routerLink]="'/login/classroom'">ClassRoom</a>
The downside of this method is that if it were use with a component inside the child module then it would make that module less flexible. This would force any module that imports it to have specify that the path to it was always /login.
If the links are in a component that is in the child module and you know it will only be used in those components specified in the RouterModule then prepend the links with ../, which would make the links all relative to their shared parent.
<a [routerLink]="'../classroom'">ClassRoom</a>
If you needed any more flexibility, such as the component with the links could be used in both the child module and parent module, then you'll have to pass the base route as an Input to the component and include it as part of the router commands array:
<a [routerLink]="[baseRoute, 'classroom']">ClassRoom</a>