Angular 5 Wildcard Routes from Database

Question

I have a list of categories from database as show below :

[
  "Travel",
  "Apparel & Clothing",
  "Footwear",
  "Kids & Children",
  "Grocery",
  "Food & Beverage",
  "Innerwear & Swimwear",
  "Hotels",
  "Bus Tickets",
  "Mobiles & Tablets",
  "Personalized Gifts",
  "Jewellery & Coins",
  "Car & Taxi Rental",
  "Pharmacy",
  "Watches",
  "Bags & Wallets",
  "Gifts & Flowers",
  "Accessories",
  "Games",
  "Health",
  "Beauty & Personal Care",
  "Electronics"
]

I am trying to create routes from this category list, I am not sure how to handle the routes for some of the categories in the list.

For example :

Apparel & Clothing
Bus Tickets

How do I handle the '&' symbol and the space in routing system of angular 5 ?

Answer 1

I found a solution similar to helpers we have Pipes concept in Angular 5.

It helped me :

https://github.com/angular/angular-cli

https://github.com/angular/angular-cli/wiki/generate-pipe

My Custom Pipe to remove space and special characters :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeSpaceCharacters'
})
export class RemoveSpaceCharactersPipe implements PipeTransform {
  transform(value: string): string {
    let newValue = value.replace(/[^A-Z0-9]/ig, "");
    return `${newValue}`;
  }
}