How to set dynamic title for single angular component

Question

In my angular application i have one dynamic route. In that dynamic route i am passing dynamic parameters to that route problem is i want to set dynamic title for that route. how can i pass dynamic title for this single route

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { SingleMoviePageComponent } from './pages/single-movie-page/single-movie-page.component';
import { MoviesComponent } from './pages/movies/movies.component';


const routes: Routes = [
  { path: '', redirectTo: '/movies', pathMatch: 'full', data: { title: 'Home Page' }},
  { path: 'movies', component: MoviesComponent, data: {title: 'All Movies Page'}},
  { path: 'movie/:id', component: SingleMoviePageComponent },
  { path: '**', redirectTo: '/'},
];

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

I have set a static title for other components using this approach

This is my : app.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {
  ActivatedRoute,
  NavigationEnd,
  Router
} from '@angular/router';
import {NgProgress} from 'ngx-progressbar';
import * as AOS from 'aos';
import {Title} from '@angular/platform-browser';
import {filter} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'Movies';

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute,
              private titleService: Title,
              ){
  }

  ngOnInit(): void {
    AOS.init({});

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
    ).subscribe(() => {

      const getChildRoute = this.getChild(this.activatedRoute);

      getChildRoute.data.subscribe(data => {
        console.log(data);
        this.titleService.setTitle(data.title);
      });

    });

  }

  hasRoute(route: string){
    return this.router.url.includes(route);
  }

  getChild(activatedRoute: ActivatedRoute) {
    if (activatedRoute.firstChild) {
      return this.getChild(activatedRoute.firstChild);
    } else {
      return activatedRoute;
    }
  }

}

I want to set a dynamic title for SingleMoviePageComponent as per requested movie_id from activatedRoute.

How can i do this ?

I have been stuck here.

what do you mean you want to set a dynamic title for SingleMoviePageComponent? You are passing an `id` param to that route, would you like to display that `id` as a title? — ViqMontana, Jul 10 '20 at 10:39
No, I subscribed movie `id` using `activatedRoute.params.subscribe()` and then i am getting data from database — yash patel, Jul 10 '20 at 11:09
refer this - https://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router — Nitin Lawande, Jul 10 '20 at 11:09

How to set dynamic title for single angular component

0 Answers0