angular 13 component does not show after clicking navigation button again - angular13

Question

The scenario:
I have a navigation component that navigates to either one of two components depending on which link is clicked. For the writeup component i display a gridlist with cards initially. When a card is clicked, the gridlist is exchanged by the show component shown through the router outlet of the writeupcomponent. All good so far but...
what i'm expecting to happen:
The user clicks that navigation button again and the gridlist of cards is shown again.
what actually happens:
Nothing is shown. The router outlet remains black after navigating to the writeup component again. When i click the other navigation button, hence loading the backlog component and then click the writeup navigation button again, the gridlist is loaded normally.
navbar-component.html:
<mat-toolbar class="navbar navbar-dark bg-dark">
<mat-icon>menu</mat-icon>
<ng-container *ngIf="loggedIn ==='false' || loggedIn === null">
<button routerLink="register" class="btn btn-outline-info mx-1" type="button">Register</button>
<button routerLink="login" class="btn btn-outline-info mx-1" type="button">Login</button>
</ng-container>
<ng-container class="logged-in" *ngIf="loggedIn === 'true'">
<div class="sub-menu-left">
<!--<button (click)="openDialog()" class="btn btn-outline-info mx-1" type="button">New Backlog Item</button> -->
<button (click)="navigate('dashboard/backlog')" class="btn btn-outline-info mx-1" type="button">Backlog</button>
<button (click)="navigate('dashboard/writeup')" class="btn btn-outline-info mx-1" type="button">Write-up</button>
</div>
<div class="sub-menu-right">
<button mat-mini-fab color="warn" aria-label="logout button with icon"
(click)="logout()" class="btn btn-outline-info mx-1" type="button">
<mat-icon>logout</mat-icon>
</button>
<app-profile [profile]="profile"></app-profile>
</div>
</ng-container>
</mat-toolbar>
<router-outlet></router-outlet>
navbar-component.ts:
import { Component, EventEmitter, OnInit, Output, ViewChild } from '#angular/core';
import { Router, ActivatedRoute, ParamMap } from '#angular/router';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor(
private router: Router
){}
navigate(route:any) {
return this.router.navigate([route]);
}
}
writeup-component.html:
<router-outlet></router-outlet>
writeup-component.ts:
import { Component, OnInit} from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-write-up',
templateUrl: './write-up.component.html',
styleUrls: ['./write-up.component.scss']
})
export class WriteUpComponent implements OnInit {
constructor( private router: Router) { }
ngOnInit(): void {
this.router.navigate(['dashboard/writeup/index'])
}
}
index-component.ts:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { Writeup } from 'src/app/interfaces/writeup';
#Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
list: Writeup[] = [
{
id:1,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
},
{
id:2,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
},
{
id:3,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
}
]
constructor(private router:Router) { }
ngOnInit(): void {
}
showWriteUp(id:number) {
this.router.navigate(['dashboard/writeup/show'])
}
}
index-component.html:
<mat-grid-list class="writeup-grid-list" cols="3" gutterSize="10px">
<mat-grid-tile *ngFor="let writeup of list">
<mat-card (click)="showWriteUp(writeup.id)" class="writeup-card">
<mat-card-title>{{ writeup.title }}</mat-card-title>
<mat-card-subtitle>{{ writeup.subTitle }}</mat-card-subtitle>
<mat-card-content>
<p>{{ writeup.content }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>{{ writeup.link }}</button>
</mat-card-actions>
</mat-card></mat-grid-tile>
</mat-grid-list>
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
...
import { WriteUpComponent } from './components/write-up/write-up.component';
import { BacklogComponent } from './components/backlog/backlog.component';
import { ShowComponent } from './components/writeup/show/show.component';
import { IndexComponent } from './components/writeup/index/index.component';
const routes: Routes = [
...
{ path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
children: [
{ path: 'backlog', component: BacklogComponent },
{ path: 'writeup', component: WriteUpComponent,
children: [
{ path: 'index', component: IndexComponent },
{ path: 'show', component: ShowComponent }
]
},
]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
show-component is not implemented yet but 'it works'

Answer 1

After using this snippet as a route debug tool:
import { Component } from '#angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
currentRoute: string;
constructor(private router: Router) {
this.currentRoute = "Demo";
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
this.currentRoute = event.url;
console.log(event);
}
});
}
}
i found the problem. Turned out i was being routed to dashboard/writeup instead of dashboard/writeup/index, i'm still not sure why it does work after loading another component. I think it has something to do with the writeup component not using the onInit method anymore. I removed the entire writeup component, just using path: 'writeup' in app-routing.module.ts. It was redundant :
{ path:'register', component: RegisterComponent},
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
children: [
{ path: 'backlog', component: BacklogComponent },
{ path: 'writeup',
children: [
{ path: 'index', component: IndexComponent },
{ path: 'show', component: ShowComponent }
]
},
]
}
];