1 minute read

Angular 2 pipes are super clean and super powerful. But for some dumb reason, they decided not to include a capitalize pipe to make sure the first letter is capitalized when outputting a string.

I made a stupidly simple custom pipe for those looking to add a capitalize pipe to their templates. Here is my capitalize.pipe.ts file:

import {Pipe} from "angular2/core";
import {PipeTransform} from "angular2/core";

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {

    transform(value:any) {
        if (value) {
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
        return value;
    }

}

Add that file wherever you want, I put mine in a pipes subdirectory in my working dev to make sure it is being compiled with TypeScript. Once you’ve added that in, simple drop it into your component like so:

import {CapitalizePipe} from "./capitalize.pipe";

@Component({
    selector: 'product-sidebar',
    templateUrl: 'templates/product-sidebar.html',
    pipes: [CapitalizePipe]
})

Then finally, you can add in the capitalize pipe to any string in your templates. Boom. Mic drop. Finally.