Updating specific parts from routing

[marble folio]

the first image shows the routing structure of my current position
the second one shows how it looks like in reality

the problem before I implemented the children (so basically the same structure, but the part where stuff is maked red was just not there yet) was that the guilds on the side were reloaded each time, so as soon as a guild was selected the sidebar was empty for ~1-2 seconds
I ignored that at first and was focosing on the dashboards content itself and implemented the route children

after that the guilds on the side didn't reload again after clicking which wasn't was was supposed to happen; the child routes were only for the content of the dashboard itself, not the selector on the side

below is the sidebar.component.ts file and below that my routing
what I want to have in the end is what is shown in my drawing pluss the sidebar reloading, but with the catch that there isn't a new api request every time, instead just this part in my html (guild.id === selectedGuild ? '' : ' rounded-r-2xl mr-2') should react

sidebar.component.ts

import {Component, Input} from '@angular/core';
import {BotApiService} from "../../bot-api.service";
import {BotGuild, PartialGuild} from "../../datatypes";
import {AuthService} from "../../auth.service";

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  @Input() selectedGuild: number = 0;

  userGuilds: PartialGuild[] = [];
  botGuilds: BotGuild[] = [];
  guilds: PartialGuild[] = [];
  optionalGuilds: PartialGuild[] = []

  constructor(private _botAPI: BotApiService, private _auth: AuthService) {}

  ngOnInit(): void {
    this._botAPI.getGuilds()
      .subscribe(data => this.botGuilds = data);
    this._auth.fetchUserGuilds()
      .subscribe(data => {
        this.userGuilds = [];
        for (const guild of data) {
          if (guild.owner) {
            this.userGuilds.push(new PartialGuild(guild));
          }
        }
        this.guilds = [];
        this.guilds = this.userGuilds;
      });
  }
}

sidebar.component.html

<div class="grid auto-rows-min h-full ml-2 overflow-y-auto hide-scroll">
  <app-sidebar-guild
    *ngFor="let guild of guilds;"
    [guild]="guild"
    [routerLink]="'/dashboard/' + guild.id"
    [ngClass]="'sidebar-guild' + (guild.id === selectedGuild ? '' : ' rounded-r-2xl mr-2')"
  ></app-sidebar-guild>
</div>

routes within app.module.ts

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'callback', component: CallbackComponent},
  {path: 'dashboard', component: DashboardComponent},
  {
    path: 'dashboard/:id',
    component: DashboardComponent,
    children: [
      {path: 'overview', component: OverviewComponent},
      {path: 'settings', component: SettingsComponent},
      {path: 'statistics', component: StatisticsComponent}
    ]
  },
  {path: '**', component: NotFoundComponent},
]```

this is the drawing, dunno why it was a jfif

[candid kraken]

You could create a service that has a rxjs BehavorSubject that holds the currently selected id. You can update the id from the dashboard component.

You can then subscribe to the BehavorSubject in the sidebar component. That will cause your html in side bar to pick up on the changes.

As always if you subscribe be sure to unsubsricbe. It will not happen automatically for you.

[marble folio]

how do I unsubscribe and why would I do that?

[candid kraken]

Are you familar with rxjs Observables?
If you don't unsubscribe the function inside the subscribe will continue to run after you navigate away from the page. If you come back to the same page you will now have 2 duplication subscribe functions running. This is a memory leak.

Here is a list of ways to do it. These are older methods. I used to use what the article calls takeUntil(notifier) method. https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

If you are using angular 16 you can use this new and very convenient method. https://indepth.dev/posts/1518/takeuntildestroy-in-angular-v16

[marble folio]

I am not familiar with rxjs

the thing with unsubscribing is good to know, cause no tutorial I watched / article I've read mentioned that

[candid kraken]

One thing about that. If it is a http request from angulars HttpClient you don't need to unsubscribe. That is the only case I know where you don't have to unsub.

[marble folio]

so this for example doesn't have to be unsubscribed from?

  getLoginLink(): Observable<linkData> {
    return this._http.get<linkData>(this.URL + 'login')
  }```

[candid kraken]

rxjs is used a lot in angular. I would read up on Subject and BehaviorSubject. They can be great methods for reativity between 2 or more components with a service.

[candid kraken]

No. As long has _http is angulars HttpClient

[marble folio]

yep

[candid kraken]

Then you don't have to worry about that

[marble folio]

didn't know you could subscribe to other things even, tho I'm quite new to angular (or typescript in general) and its concepts

but either way, do you have any idea why the sidebar isn't updating even tho I'm accessing a base route and not one of its children?

[candid kraken]

Read my first post in this thread. Here is a good article on rxjs behavior subject https://indepth.dev/reference/rxjs/subjects/behavior-subject

[kindred token]

You should always unsubscribe (tm), no matter where the observable comes from

Also in which component is the sidebar?

(could probably use 2 outlets btw)

Don't see where you're using the dashboard id in the sidebar either

[marble folio]

the id gets stored in selectedGuild

the sidebar is used in the dashboard component

<div class="dashboard-container">
  <app-sidebar [selectedGuild]="selectedGuild"></app-sidebar>
  <app-guild-container *ngIf="selectedGuild"  [selectedGuild]="selectedGuild"></app-guild-container>
  <p *ngIf="!selectedGuild">Select a guild</p>
</div>

[kindred token]

But the selected guild is the one you're looking at right?

The content of the sidebar remains the same no matter which guild is selected

[marble folio]

yeah that is true, the only thing that should change is the css classes

[kindred token]

Then a simple <a routerLinkActive> would cover it