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);
  }
}

Thanks! But this does not replace Turkish chars like ü ö ğ ç ı ş.

Hi, thanks @djabif. @anelad I implemented Turkish character support here: https://gist.github.com/coskuncakir/3378d0147968e4297eb20a1d214296eb

thanks @coscakir!

thanks @coscakir!

Thank you so much for this! Spent 4 hours+ trying to understand replace () in Angular to create this specific pipe!

Thank you !

For Spanish Language you have this one https://gist.github.com/ruslanguns/192bfb952df48325a1c15e648f88f0a7 based in the sample of @coscakir

thanks

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!