Преобразование текста в TitleCase с помощью Angular2 Pipes

Недавно у меня была возможность создать свой первый пользовательский Angular2 Pipe. Документация angular, хотя и очень полезна, может быть немного сложной для навигации, поэтому я подумал, что воспользуюсь этой возможностью, чтобы написать быстрый пример того, как создать собственный класс конвейера, как внедрить его в свой компонент и как использовать это в ваших HTML-шаблонах.

В приведенном ниже примере показан канал, который принимает строковый оператор и форматирует его в TitleCase (также известный как ProperCase). Используя эту трубу, строка «Нью-Йорк» преобразуется в «Нью-Йорк».

app / pipe / title-case.pipe.ts

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

@Pipe({name: 'titleCase'})
export class TitleCasePipe implements PipeTransform {
    public transform(input:string): string{
        if (!input) {
            return '';
        } else {
            return input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() ));
        }
    }
    
}

app / components / my-component.component.ts

import {Component} from '@angular/core';
import {TitleCasePipe} from 'my-component.component';
@Component({
  selector: 'my-component',
  templateUrl: 'my-component.components.html',
  pipes: [TitleCasePipe,],
})
export class MyComponent {
    public somestring: string;
}

app / components / my-component.component.html

<p>{{ somestring | titleCase }}</p>

Вот и все!

Для получения дополнительной информации о каналах и angular в целом ознакомьтесь со следующими документами.