Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

angular-6-pipe-titlecase-pipe-uppercase-pipe-lowercase-pipe-feature-image-v1.1

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Related posts:
Angular 6 KeyValue Pipe
Angular Built-in DatePipe
Angular Custom Pipe | Pure & Impure Pipes
Angular Built-in SlicePipe

Related pages:

Uppercase Pipe & Lowercase Pipe

Uppercase

Syntax:

{{ value_expression | uppercase }}

-> Transforms text (string) to all upper case.

Lowercase

Syntax:

{{ value_expression | lowercase }}

-> Transforms text (string) to all lower case.

We create a uppercase-lowercase-pipe component, as below:

uppercase-lowercase-pipe.component.ts ->

uppercase-lowercase-pipe.component.html ->

-> Results:

angular-6-built-in-pipes-uppercase-pipe-lowercase-pipe-titlecase-pipe-uppercase-lowercase-results

Titlecase Pipe

Syntax:

{{ value_expression | titlecase }}

-> Transforms text to title case.
Rules:

  • Capitalizes the first letter of each word (Words are delimited by any whitespace character, such as a space, tab, or line-feed character.)
  • Transforms the rest of the word to lower case.

We create a titlecase-pipe component style as below:

titlecase-pipe.component.html ->

-> Results:

angular-6-built-in-pipes-uppercase-pipe-lowercase-pipe-titlecase-pipe-title-case-results

SourceCode

– Project structure:

angular-6-built-in-pipes-uppercase-pipe-lowercase-pipe-titlecase-pipe-project-structure

-> Results:

angular-6-built-in-pipes-uppercase-pipe-lowercase-pipe-titlecase-pipe-results

– SourceCode:

AngularTransformTextPipes

By grokonez | September 4, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*