Having some trouble with my navbar containing different components that should open upon selection. The profile component is opening correctly, but the "My favorites" button isn't displaying anything from that component.
Here's the code snippet for the navbar:
<form class="form-inline my-2 my-lg-0">
<ul class="nav navbar-nav navbar-right">
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a class="nav-link" [routerLink]= "['/favorites']">My favorites</a></li>
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a class="nav-link" [routerLink]= "['/dashboard']">Dashboard</a> </li>
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a class="nav-link" [routerLink]= "['/profile']">Profile</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a class="nav-link" [routerLink]= "['/login']">Login</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"> <a class="nav-link"[routerLink]= "['/register']">Register</a></li>
<li><a class="nav-link" (click)="onLogOutClick()" href="#">Logout</a></li>
</ul>
</form>
The routing setup in my app.module.ts looks like this:
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'register', component: RegisterComponent},
{path: 'login', component: LoginComponent},
{path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
{path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},
{path: 'favorites', component: FavoritesComponent, canActivate: [AuthGuard]}
]
If needed, I can provide additional code snippets.