Angular Pipe to transform a string into a slug

slugify.pipe.ts

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

@Pipe({name: 'slugify'})
export class SlugifyPipe implements PipeTransform {
  transform(input: string): string {
    return input.toString().toLowerCase()
      .replace(/\s+/g, '-')           // Replace spaces with -
      .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
      .replace(/\-\-+/g, '-')         // Replace multiple - with single -
      .replace(/^-+/, '')             // Trim - from start of text
      .replace(/-+$/, '');            // Trim - from end of text
  }
}

your.component.ts

import { SlugifyPipe } from '../../shared/slugify.pipe'; 
//remember to add this pipe as a module provider. In my case it is declared as a provider in my SharedModule

@Component({
   //... 
})

export class YourComponent{
  constructor(private slugifyPipe: SlugifyPipe){}
  
  slugify(input: string){
      var your_new_slug = this.slugifyPipe.transform(input);
  }
}

Thank you!

could you show the full implementation?

This is amazing, exactly what I needed! Can't believe this doesn't come with Angular by default 🤔 Thank you!

This is amazing, exactly what I needed! Can't believe this doesn't come with Angular by default 🤔 Thank you!

Thanks 😍

Thank you!