Title Case

HTML

<input 
    type="text" 
    [(ngModel)]="title" 
    class="form-control"/>
<p>{{ title | titleCase }}</p>

TS

export class AppComponent {
  title: string;
}

Generate a pipe

ng g p title-case

title-case.pipe.ts

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

@Pipe({
  name: 'titleCase'
})
export class TitleCasePipe implements PipeTransform {

  transform(value: string): any {
    if(!value) return null;

    let prepositions = [
      'of',
      'the'
    ];

    let words = value.split(' ');
    for (var i = 0; i < words.length; i++){
      if (i > 0 && prepositions.includes(words[i].toLowerCase())) 
        words[i] = words[i].toLowerCase();
      else{
        words[i] = words[i].substr(0,1).toUpperCase() + words[i].substr(1).toLowerCase();
      }
    }
    return words.join(' ');
  }

}

Refactoring with object oriented private methods

title-case.pipe.ts

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

@Pipe({
  name: 'titleCase'
})
export class TitleCasePipe implements PipeTransform {

  transform(value: string): any {
    if(!value) return null;

    let words = value.split(' ');
    for (var i = 0; i < words.length; i++){
      let word = words[i];
      if (i > 0 && this.isPreposition(word))
        words[i] = word.toLowerCase();
      else
        words[i] = this.toTitleCase(word);
    }
    return words.join(' ');
  }

  private toTitleCase(word: string): string {
    return word.substr(0,1).toUpperCase() + word.substr(1).toLowerCase();
  }

  private isPreposition(word: string): boolean {
    let prepositions = [
      'of',
      'the'
    ];
    return prepositions.includes(word.toLowerCase())
  }
}
Was this page helpful?