Как я могу отправить данные из компонента в модуль маршрутизации в Angular 16?

Я работал над SPA с Angular 16, TypeScript и The Movie Database (TMDB).

Я сделал компонент, который отображает фильмы по жанрам:

import { Component } from '@angular/core';
import { GenreResponse, Genre } from '../../models/Genre';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-movies-by-genre',
  templateUrl: './movies-by-genre.component.html',
  styleUrls: ['./movies-by-genre.component.scss']
})
export class MoviesByGenreComponent {
  public movieResponse!: MovieResponse;
  public movies: Movie[] | undefined = [];

  public genreResponse!: GenreResponse;
  public genres: Genre[] | undefined = [];

  public genreName: string | undefined = '';

  constructor(
    private activatedRoute: ActivatedRoute,
    private movieService: MovieService
  ) { }


  public getMoviesByGenre(): void {

    // Get genre id (from URL parameter)
    const genre_id = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    // Get genre name from genres array
    this.movieService.getAllMovieGenres().subscribe((response) => {
      this.genreResponse = response;
      this.genres = this.genreResponse.genres;

      if (this.genres && this.genres.length) {
        let currentGenre = this.genres.find(genre => genre.id === genre_id);
        if (currentGenre) {
          this.genreName = currentGenre.name;
        }
      }
    });

    // Get movies by genre id
    this.movieService.getMoviesByGenre(genre_id).subscribe((response) => {
      this.movieResponse = response;
      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMoviesByGenre();
  }
}

В сервисе, используемом вышеуказанным компонентом, у меня есть:

import { environment } from '../../environments/environment';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';
import { GenreResponse } from '../models/Genre';
import { TrailerResponse } from '../models/Trailer';

@Injectable({
  providedIn: 'root'
})

export class MovieService {
  constructor(private http: HttpClient) { }
  
  public getAllMovieGenres(): Observable<GenreResponse> {
    return this.http.get<GenreResponse>(`${environment.apiUrl}/genre/movie/list?api_key=${environment.apiKey}`);
  }

  public getMoviesByGenre(id: Number): Observable<MovieResponse> {
    return this.http.get<MovieResponse>(`${environment.apiUrl}/discover/movie?api_key=${environment.apiKey}&with_genres=${id}`);
  }
}

В модуле маршрутизации у меня есть:

const routes: Routes = [
  {
    path: '',
    component: HomePageComponent,
    data: { title: 'Now playing', animation: 'isRight' },
  },
  {
    path: 'by-genre/:id',
    component: MoviesByGenreComponent,
    data: { title: '', animation: 'isLeft' },
  },
  {
    path: 'movie/:id',
    component: MovieDetailsComponent,
    data: { title: '', animation: 'isLeft' },
  },
  {
    path: 'actor/:id',
    component: ActorDetailsComponent,
    data: { title: '', animation: 'isRight' },
  },
  {
    path: '**',
    component: NotFoundComponent,
    data: { title: '', animation: 'isRight' },
  },
];

Из модуля маршрутизации, если свойство title в объекте data не пусто, я отображаю заголовок страницы в app\app.component.html:

<div class = "container">
  <h1 *ngIf = "title.length" class = "page-title text-success mt-2 mb-3">{{ title }}</h1>
  <router-outlet></router-outlet>
</div>

Для MoviesByGenreComponent я хочу отправить динамически полученное название жанра (переменная genreName) из компонента в маршрутизатор и присвоить genreName свойству title.

Желаемый результат:

Стекблиц

Есть stackblitz со всем имеющимся у меня кодом.

Каков наиболее надежный способ достичь этого результата?