I've been struggling for the past 3 hours trying to switch between routes. Let me explain further:
Server Template HTML:
<!-- I want the first div to display when the component opens, but disappear and show router-outlet when a button is clicked.
When switching servers, I want 'display' to be true -->
<div *ngIf="display">
<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>
<button class="btn btn-primary" (click)="onEdit()">Edit Server</button>
</div>
<!-- The entire template should disappear when changing servers -->
<div>
<router-outlet></router-outlet>
</div>
Server Component TS:
export class ServerComponent implements OnInit {
server: {id: number, name: string, status: string};
id: number
display: boolean = true
URLid: number
constructor(private serversService: ServersService, private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
// It captures the id in the url and searches for its respective server
this.id = +this.route.snapshot.params['id']
this.server = this.serversService.getServer(this.id)
this.route.params.subscribe((params: Params) => {
this.id = +this.route.snapshot.params['id']
this.server = this.serversService.getServer(this.id)
})
}
onEdit() {
/*
When the button is clicked, display is set to false. This makes only 'router-outlet'
displayed. However, when the server changes, everything disappears.
*/
this.display = !this.display
this.route.params.subscribe(params => {
this.URLid = params['id']
})
this.router.navigate(['edit'], {relativeTo: this.route})
}
}
EditServer Template:
<h4>No editing the server!</h4>
Other code is irrelevant.
If images help, here they are:
(1) Initial State of the problem https://i.stack.imgur.com/9d8GY.png
(2) Edit Server functionality https://i.stack.imgur.com/3gVYs.png
(3) Issue when changing to Devserver, it should reset to (1).
https://i.stack.imgur.com/8Jupx.png
Any insights on what might be going wrong? Thanks!