Angular 10 UpperCasePipe

The UpperCasePipe is a built-in pipe in Angular 10 that can be used to transform text to uppercase. This pipe can be used in templates to format text without changing the underlying data.

Syntax

The syntax for using the UpperCasePipe is as follows:

{{ text | uppercase }}

where text is the input string that you want to transform to uppercase.

Example

<p>
  The quick brown fox jumps over the lazy dog.
  {{ 'The quick brown fox jumps over the lazy dog.' | uppercase }}
</p>

The above code will output:

<p>
  The quick brown fox jumps over the lazy dog.
  THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
</p>

Customization

The UpperCasePipe does not have any options for customization. However, it is possible to create a custom pipe if you need to modify the way the text is transformed.

Here is an example of a custom pipe that adds an exclamation mark to the end of the input string before transforming it to uppercase:

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

@Pipe({ name: 'upperCaseExclamation' })
export class UpperCaseExclamationPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase() + '!';
  }
}

Now, you can use this custom pipe in your templates:

<p>
  {{ 'hello world' | upperCaseExclamation }}
</p>

This will output:

<p>
  HELLO WORLD!
</p>

Conclusion

The UpperCasePipe is a useful built-in pipe in Angular 10 that can be used to transform text to uppercase. While it does not have any customization options, it is possible to create custom pipes to modify the way the text is transformed.