Table of Contents

• Installation
  • Packages that need to be installed
  • Modules that need to be in NgModule
• Available pipes
• Usage
  • HTML
  • Class

Installation

Packages that need to be installed

• @angular/cdk
• @angular/common
• @angular/core
• @angular/forms
• @angular/platform-browser
• @terminus/fe-utilities
• @terminus/ui-utilities
• @terminus/ui-pipes
• date-fns

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-pipes

Modules that need to be in NgModule

• TsPipesModule

Available pipes

| Pipe | Notes | |---------------------------------------------------|---------------------------------------------| | tsAbbreviateNumber| Abbreviate a number | | tsDate | short, medium, extended, timestamp | | tsRoundNumber | Round a number to a specific precision | | tsSentenceCase | Convert string casing to sentence-case | | tsTimeAgo | Human-readable time span | | tsTitleCase | Title Case A String | | tsTruncateAt | Truncate a string, start, middle, end |

Usage

HTML

Import the TsPipesModule module into your app:

import { TsPipesModule } from '@terminus/ui-pipes';

@NgModule({
  imports: [
    ...
    TsPipesModule,
  ],
  ...
})
export class AppModule {}

Then use the pipe in HTML:

{{ 'HERE IS MY STRING' | tsSentenceCase }}

If the pipe takes parameters, pass them in after the pipe name:

{{ '1200' | tsAbbreviateNumber:2:false }}

Class

Import the pipes module to your app:

import { TsPipesModule } from '@terminus/ui-pipes';

@NgModule({
  ...
  imports: [TsPipesModule],
  ...
})
export class AppModule {}

Then inject the pipe into your class and use:

import { TsSentenceCasePipe } from '@terminus/ui-pipes';

@Component({ ... })
export class MyComponent {
  myString = this.sentenceCasePipe.transform('ANOTHER STRING');

  constructor(private sentenceCasePipe: TsSentenceCasePipe) {}
}