Angular link changes the URL but not the content

Question

I have one smart component which calls to a service that retrieves all the information from the api and load a set of dumb components that show all the information.

When init the smart component get the id from the urls and sends it to the the service to get all the data from the api and everything works as expected but when I click in one of the links on the page that should load the same page but different id the url changes but does not the view and I don't see any activity on the console neither.

This is the smart component:

export class MovieDetailsPageComponent implements OnInit {
  movieId: string;
  movie: any;
  credits: any;
  reviews: any;
  recommendations: any;

  constructor(private route: ActivatedRoute, private api: ApiService) {}

  async ngOnInit() {
    // this.route.params.subscribe((params: Params) => (this.movieId = params.id));
    this.movieId = this.route.snapshot.paramMap.get('id');
    this.movie = await this.getMovieDetails(this.movieId);
    this.credits = await this.getMovieCredits(this.movieId);
    this.reviews = await this.getMovieReviews(this.movieId);
    this.recommendations = await this.getMovieRecommendations(this.movieId);
  }


  async getMovieDetails(movieId) {
    return await this.api.getMovieDetails(movieId);
  }

  async getMovieCredits(movieId) {
    return await this.api.getMovieCredits(movieId);
  }

  async getMovieReviews(movieId) {
    return await this.api.getMovieReviews(movieId);
  }

  async getMovieRecommendations(movieId) {
    return await this.api.getMovieRecommendations(movieId);
  }
}

And this is the dumb component that shows the links:

export class RecommendationsComponent implements OnInit {
  @Input() recommendations: any;
  constructor() {}

  ngOnInit(): void {}
}

<div class="content">
  <h4 class="h4">
    You may like
  </h4>
  <app-posters [movies]='recommendations.results'></app-posters>
</div>

This is the 'second' dumb component loaded from the 'first' dumb component:

<div>
  <a routerLink="/movie/{{ movie?.id }}">
    <img
      class="img-fluid rounded"
      src="{{ movie?.backdrop_path | apiImages }}"
    />
    <p>{{ movie?.original_title }}</p>
  </a>
</div>

Actually there's more dumb components from the smart component until the one that actually renders the links not sure if this could affect on the home page I already have it working well so far.

Edit:

This is my routing module:

const routes: Routes = [
  { path: 'home', component: UpcomingPageComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'movie/:id', component: MovieDetailsPageComponent }
];

Answer 1

I think I've figured out how to solved but would appreciate if anyone knows a better alternative could share it.

On the onInit function when loading the smart component I've subscribed to the url's id and included all the functions inside the subscription (excuse my low technical level explanation):

async ngOnInit() {
    console.log('vuelta a empezar');
    this.route.params.subscribe(async (params: Params) => {
      this.movieId = params.id;
      await this.doThings(this.movieId);
    });

The toDo function (pending to refactor) just wraps all the previous functions inside:

async doThings(movieId){
  this.movie = await this.getMovieDetails(movieId);
    this.credits = await this.getMovieCredits(movieId);
    this.reviews = await this.getMovieReviews(movieId);
    this.recommendations = await this.getMovieRecommendations(movieId);
}