Angular 2/4/5 display dates with suffix (st, rd and th) in expression

Thank you Roddy,

So meanwhile that the Angular team come up with some core feature for date suffixes, here's the simplistic pipe I came up with.

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

@Pipe({ name: 'dateSuffix' })
export class DateSuffix implements PipeTransform {
    transform(value: string): string {

    let suffix = 'th',
        day = value;

        if (day === '1' || day === '21' || day === '31') {
            suffix = 'st'
        } else if (day === '2' || day === '22') {
            suffix = 'nd';
        } else if (day === '3' || day === '23') {
           suffix = 'rd';
        }

        return suffix;

    }
}

and once imported in the component...

I use an expression like this

{{record.RecordDate | date: "MMM.d"}} 
<span class="text-superscript">
    {{(record.RecordDate | date: "d") | dateSuffix}}
</span>

which outputs something like Apr.3rd