Angular2 – writing custom pipe

Pipes are important for data transformations within a template.
Below is a custom pipe for Angular2 which transforms any string to a standard slug.

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

@Pipe({name: 'slug'})
export class SlugPipe implements PipeTransform {
  transform(str: string): string {
    return str.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(/-+$/, '');
  }

}

Usage:

Usage in Angular2 Templates.

let name = 'My big Long >> name'; 
{{ name | slug }}
// output:: my-big-long-name

Usage in Angular2 Components.

let name = 'My big Long >>""" name ';
let slugify = new SlugPipe();

let mySlugName = slugify.transform(name); // output:: my-big-long-name

Hope this is beneficial to the readers! 🙂