Angular Pipe to Shuffle Strings With JavaScript

In this quick snippet, I provide code to randomly shuffle a string with JavaScript. It works by breaking down the string into an array, shuffling it, then joining it back together. This might be useful for hiding content or anonymizing data.

You could also use the lodash shuffle operator to replace the randomize function defined below.

shuffle.pipe.ts

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

@Pipe({
  name: 'shuffle'
})
export class ShufflePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return ''
    return value.split('').sort(this.randomize).join('')
  }

  private randomize(a, b) {
  	return Math.random()>.5 ? -1 : 1;
  }
}

foo.component.html

<div *ngFor="let user of users | async">
  {{ user.username | shuffle }}
</div>