Need Help: Route Params in Angular 14

Question

I'm learning Angular from Frontendmasters.com, During course, we're building this project (you can say: courses management system) Right Now: my url is ( localhost:4200/courses ) and it shows courses component which is container component and have two presentation components 1- courses-list component 2- course-details component

whenever I click on any course from list, it shows the course details in course details component. but URL remains same ( localhost:4200/courses )

I want that whenever I click on course from list, and it shows course details but also change the url to ( localhost:4200/courses/{course-title} ) means it shows the course title as slug in the in the url. like if i select the Angular 13 fundamentals course and it shows angular 13 fundamentals course details in details component but it's URL also turned into ( localhost:4200/courses/angular-13-fundamentals )

How can i do this.? (if images not clear let me know, i can inbox you.) screenshot attached app ui

routing module

app.routing.module.ts

`

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


import { CoursesComponent } from './courses/courses.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'courses', component: CoursesComponent},
  { path: 'course/:title', component: CoursesComponent },
  { path: '**', redirectTo: '/home' }
];

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

`

courses component ts file

courses.component.ts

`

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Course } from '../common/models/course';
import { CoursesService } from '../common/services/courses.service';

const emptyCourse : Course = {
    id: "",
    title: "",
    description: "",
    percentComplete: 0,
    favorite: false
};

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {
  courses:any = [];
  courses$:any;
  selectedCourse = emptyCourse;
  originalTitle = "";
  currentTitle!: string | null;


  constructor(private coursesService: CoursesService, private route: ActivatedRoute, private router: Router) { }
  
  ngOnInit(): void {
    this.fetchCourses();
    this.route.paramMap.subscribe(params => {
      this.currentTitle = params.get('title');
  });
  }

  fetchCourses() {
    this.courses$ = this.coursesService.all();
  }

  selectCourse(course:any) {
    this.selectedCourse = course;
  }

  saveCourse(course:any) {
    if(course.id === "") {
      this.createCourse(course);
    } else {
      this.updateCourse(course);
    }
    console.log("Selected Course is ",course);
  }

  createCourse(course:Course) {
    this.coursesService.create(course)
    .subscribe((result:any) => this.fetchCourses());
  }

  updateCourse(course:Course) {
    this.coursesService.update(course)
    .subscribe((result:any) => this.fetchCourses());
  }

  deleteCourse(course:any) {
    this.coursesService.delete(course.id)
    .subscribe((result:any) => this.fetchCourses());
  }

  reset() {
    this.selectCourse({...emptyCourse});
  }

  formatLabel(value: number) {
    if (value >= 1000) {
      return Math.round(value / 1000) + 'k';
    }

    return value;
  }

}

`

---

whereas when i click on any course (selected course method execute)

I try to explain problem in detail Thank You so much.

I want that whenever I click on course from list, and it shows course details but also change the url to ( localhost:4200/courses/{course-title} ) means it shows the course title as slug in the in the url. like if i select the Angular 13 fundamentals course and it shows angular 13 fundamentals course details in details component but it's URL also turned into ( localhost:4200/courses/angular-13-fundamentals )

How can i do this.?

Answer 1

What you are looking for is Parameterised Routing : https://codecraft.tv/courses/angular/routing/parameterised-routes/

and you wanna have a router inside the courses module, just like the app router, that route to the course-details.component. the latter should then get the name of the course from the url and display the details after fetching them from the server.