How to create SEO friendly URLs with category/subcategories/article slug in angular project?

Question

I am using Angular 8 Version to create a news app. I need to display the link like this: www.domain.com/category/category/title and www.domain.com/category. How can I achieve this?

Thanks

Answer 1

Do you literally just mean a link with link text that differs from its href, like this?

If so,

<a [routerLink]="url">{{seoUrl}}</a>

Typescript:

url: 'https://www.google.com';
seoUrl: 'https://www.google.com/category/slug';

Or do you want to do something more with the url of the page itself?

EDIT:

Routing module

// Declare two routes with an optional title. We will always redirect to the title route. Order matters here - routes will be matched in order.
{ path: 'category/:category/:title', component: CategoryComponent },
// this path declares a route similar to /category/abc where abc is a category 
{ path: 'category/:category', component: CategoryComponent }

Category component

// component decorator omitted for brevity
export class CategoryComponent implements OnInit {
  constructor(private route: ActivatedRoute,
    private router: Router
  ) {
  }

  ngOnInit(): void {
    // get the category from the url
    const categoryName = this.route.snapshot.paramMap.get('category');
    const titleName = this.route.snapshot.paramMap.get('title');

    // TODO: implement categoryService
    this.categoryService.getCategory(categoryName).subscribe(category => {
      if (!title) {
        this.router.navigateByUrl(`/category/${category.name}/${category.title}`);
        return;
      }

      // TODO: render the category
    });
  }
}