Pass menu item name to routing component in Angular 12

I am new to Angular and I'm trying to create an app that has two main components: a side bar and the main component.

#app.component.html

<div class="root">
    <div class="side-bar">
        <app-side-bar></app-side-bar>
    </div>
    <div class="main-content">
        <router-outlet></router-outlet>
    </div>
</div>

# app-routing.module.ts

const routes: Routes = [

  {
    path: '',
    component: WelcomeComponent,
  },
  {
    path: 'category/:id',
    component: MainContentComponent,
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the side bar component i have a dynamic list with and when the user clicks on a item the corresponding component is shown in the main component.

# side-bar.component.html
<aside>
#HTML stuff
  <main class="container" *ngFor="let item of items">
    <div class="trilha" [routerLink]="['/category/'+ item.id]">
      <span class="item-name">{{ item.title }}</span>
    </div>
  </main>
</aside>

@Component({
  selector: "app-side-bar",
  templateUrl: "./side-bar.component.html",
  styleUrls: ["./side-bar.component.css"],
})
export class SideBArComponent implements OnInit {
  categories: any;

  constructor(private categoryService: CategoryService) {}

  ngOnInit(): void {
    this.categoryService.findAll().subscribe((data : Category[]) => {
      this.categories = data;
    });
  }
}

In the main component I have a header subcomponent that should display the name of the option clicked in the side bar.

# main-content.component.html


<app-header [Title]= "CATEGORY NAME"></app-header>

<div class="content">
    <app-category-content></app-category-content>
</div>

# main-content.component.ts

@Component({
  selector: "app-main-content",
  templateUrl: "./main-content.component.html",
  styleUrls: ["./main-content.component.css"],
})
export class MainContentComponent implements OnInit {
  categoryId: number = 0;


  constructor(
    private service: CategoryService,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.categoryId = this.activatedRoute.snapshot.params["id"];
  }

How do I pass the name for the routed component so I can display it on the Header?

There are two ways of sharing data between components:

1. Via Redux
2. Via RxJs Subject/BehaviorSubject
   I'm going to give a solution via RxJs.

Create a app-store.ts in src/app with following content:

import { Subject } from "rxjs";

export class AppStore {
  static categoryName$ = new Subject<string>();
}

Now use this AppStore in your component to emit a data like this:

AppStore.categoryName$.next("my dynamic category name");

In your header component:

sub$ = new Subscription();

ngOnInit() {
  this.subs$.add(
    AppStore.categoryName$.subscribe(name => {
      this.title = name;
    })
  );
}

ngOnDestroy() {
  this.sub$.unsubscribe();
}

So basically here, we are sharing data between components in a reactive way. Even you can use signal which introduced in Angular v16 if you are using Angular v16.
I hope it will help to solve this problem and future problems related to share data between components.